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

Given the example snippet, I assume you want the red bordered container to be just as big as the inner image. The black bordered container should not change in size.

To accomplish this, it is enough to add display: flex; to #imagecontainer.

You have set some flex properties on it (flex-basis and flex-shrink) that do nothing without a flex element.

By default, the display value of a div is block.

Snippet:

Image in flex container with limited height

  

    
  


Original image





Image in just a simple div with limited height