CSS flipcard without specifying a height (using flexbox)

I'd like to use flexbox to create a flip card have an image (using the <picture> element) on the front and some information on the back site.

Images can have different width/height ratio, but should be always centric. I achieve this by using (actually the sizes attribute determines the width of the element):

<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
            <picture>
                <img src="data/IMGP7206_sized.jpg"
                     srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
                     sizes="60vw">
            </picture>
 </div>

The backside of the card should be the same as the front, which is defined by the image size. Current CSS implementations of flipcards assigning an fixed width/height to the container. I would like to end up with something like this:

 <div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <picture>
                    <img src="data/IMGP7206_sized.jpg"
                         srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
                         sizes="60vw">
                </picture>
            </div>
            <div class="back">
                SAME SIZE AND POSITION AS IMAGE
            </div>
        </div>
    </div>

</div>

Flipcard structure was taken from David's page.

Is there a possibility to get this done using CSS only?