How to get a div with extrinsic height and intrinsic width inside a flexbox

Question

Problem

Say we have a vertical (i.e. flex-direction: column) flexbox container with a given width and height. The flexbox contains divs and each div contains an image.<

Answer 1

Here's the solution for your problem.

    

      

        
      
    
    
    Original image

    
    
    

    Image in just a simple div with limited height
    

      
    

You simply didn't need most of the flex properties on the img container and it's parent divs. I have used all the unused code from your HTML.

Crucial advice: You should never use inline styling like you did here. I repeat never.