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. Changing the width also affects the display of the image. (I also checked in on Edge)
What i want to see (ignore the stretched image):
What is rendered while accessing the devtools.
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).