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.

    <div
      style="display: flex; border: 1px solid black; width: 200px;"
    >
      <div
        id="imagecontainer"
        style="
          display: flex;
          height: auto;
          box-sizing: border-box;
          border: 1px solid red;
        "
      >
        <img src="https://via.placeholder.com/150.png" style="" />
      </div>
    </div>
    
    Original image<br />
    <img
      src="https://via.placeholder.com/150.png"
      style="border: 1px solid black;"
    />
    
    <br />
    Image in just a simple div with limited height
    <div
      style="
        position: relative;
        height: 110px;
        border: 1px solid red;
        width: min-content;
      "
    >
      <img
        src="https://via.placeholder.com/150.png"
        style="max-height: 150px; height: 100%;"
      />
    </div>

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.

Answer 2

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
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
  <div id="imagecontainer" style="position: relative; display: flex; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content;">
    <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
  </div>
</div>

Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />

<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
  <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>

Answer 3

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
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start; ">
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (270 / 120));height: 100%;">
    <img src="https://via.placeholder.com/120.png" style=" height: 100%;" />
  </div>
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: fit-content; max-height: calc(100% / (270 / 150));height: 100%;">
    <img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
  </div>
</div>

Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />

<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
  <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>

If there are 3 elements in flex container:

Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (420 / 120)); height: 100%;">
    <img src="https://via.placeholder.com/120.png" style=" height: 100%;" />
  </div>
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (420 / 150));height: 100%;">
    <img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
  </div>
   <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (420 / 150));height: 100%;">
    <img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
  </div>
</div>

Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />

<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
  <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>

Answer 4

Reason for extra space at right

Actually, according to me, first the img overflows out of flex container (since img loading takes time i.e. out of flow) and then height is shrunk due to covering div. The width of img adjusts as it should be but the width of covering div doesn't changes. There is no property here to do that.

You could simply do something like this...

.a {
  border: 1px red solid;
  width: 200px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.a>div {
  border: 1px blue solid;
  min-height: 0;
  height: 100%;
}

.a>div>img {
  height: 100%;
}

<div class="a">
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
</div>

This doesn't requires extra dimension specifications and adjusts well.

I looked at your css properties, their seemed issue with min-height as in here.

Edit: I have added min-height: 0; to .a>div just before height property. I tried a lot of solutions but maybe this order was important. I spotted the order from the solution here. Thanks to him.