For some time now, I’ve been struggling with adjusting the height of an image to match the remaining height in a flex container with a column orientation. In the main container, I have one <div> tag that is also a flex container and contains several elements (in real case senario its exact height may be dynamic). The main container also contains an <img> tag. I would like the <img> tag to adjust its height and width to the remaining area in the main container.

I thought I solved the problem by adding “flex: 1” to the <img> tag, but when I enter the Chrome browser’s dev tools, the image extends beyond the fixed height of the main container. (I also checked in on Edge)

What i want to see (ignore the stretched image):

What is rendered while accessing the devtools.

Here is the demo: https://stackblitz.com/edit/stackblitz-starters-6dckyr?description=HTML/CSS/JS%20Starter&file=script.js,index.html,styles.css&terminalHeight=10&title=Static%20Starter

I read several questions about handling <img> height like:

flex-grow is not working with images

(it seems that something got changed because in full screen mode – examples from that question doesnt work either)

In this case adding ‘max-height: 100%’ would be a solution for aligning width/height of the image to fullfill empty space. But in my case its not what i want because adding this css prop also leads to overflow of image (because height 100% is the height of the main container).

I could do a <div> with a background-image but burning 2-3 hours on this is the matter of honor now (and i wanted to know just because curiocity).