adjust automatically items' HEIGHT in a flex container

Question

Here's my code:

<div class="flex justify-center text-center">
<figure>
<figcaption id=image1><div>blablabla</div></figcaption>
 <img src="here"/>
</figure>
<figure>
<figcaption id=image2><div>blablabla</div></figcaption>
 <img src="here"/>
</figure>
</div>
/* MORE OF THE SAME */

with:

    figure {
        display: block;
        max-width: 50%;
        margin: 0.1rem;
        float:right;
    img {
        max-height: 75vh;
        display: flex;
        width:auto;
        max-width:100%
    }
    }  
    figcaption {
        text-align: center;
        text-indent: 0;
    }

How do I get all those items to adjust to the smallest height once all tried to grow up to 50% ?

For now I have this: https://drive.google.com/file/d/1_A4XagDZXc130p0tPz_Laox6QwEjQUgr/view?usp=sharingBut I would like this: https://drive.google.com/file/d/1Bp9g3ZUDRzXQkTKi2kHWXOg1X-fgncIz/view?usp=sharing All still taking the full row of course

Thanks for your help, I can't figure it out.