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

If you set max-height: calc(100% / (total height / own height)) and height: 100% for #imagecontainer it will work on Firefox also. Related answer

Image in flex container with limited height

  

    
  
  

    
  


Original image





Image in just a simple div with limited height

  

If there are 3 elements in flex container:

Image in flex container with limited height

  

    
  
  

    
  
   

    
  


Original image





Image in just a simple div with limited height