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

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%;
}

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.