Struggling with text overflow ellipsis and flexboxes

Question

I'm stucked at a css problem, and i used to struggle a lot of times with thoses.

I want to make a minicard for a document like this :

And i want the file name not overflow if the title is too long and make text-ellipsis on it nut its not working, here is my simple html markup:

.document {
  display: flex;
}

figure {
  height: 64px;
  width: 64px;
}

.infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

strong {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<a href="My document with a very very very long text.pdf" class="document">
  <figure>
    <img src="/uploads/miniatures/Screenshot%202023-08-24%20125622.png" alt="My document with a very very very long text.pdf">
  </figure>
  <div class="infos">
    <strong>My document with a very very very long text.pdf</strong>
    <span>Now, 512.2 KB</span>
  </div>
</a>

I've looked a lot of topics on this, talking about min-width, use of flex-basis and other thing.

but the main problem looks like i'm using a v flex inside a h flexbox and all the examples i saw have not a flexbox nested.

Do you have any clue?

Thank a lot in advance.