Internet Explorer - Flexbox Image Ratio

Question

The following fiddle shows image ratio correctly in Chrome / Firefox.

However in Internet Explorer the images (which should be square) retain their original height in

Answer 1

Add one bit of CSS:

img {
  min-height: 1px;
}

http://jsfiddle.net/mblase75/3Lb5f8pe/

Honestly, I wish I knew why this works. In light of hexalys' answer, I suppose this forces IE to recalculate the height/width ratios. (In any event, I applied this to my own code just now where the affected element is a label instead of an image; it worked there, too.)

Answer 2

The reason for this is a known documented bug where IE10 and IE11 didn't always preserve intrinsic ratios. And the reason it works in IE10 as per @gaynorvader's comment is that the default value for 'flex' in IE10 was 0 0 auto rather that the final spec's 0 1 auto. Which means that in IE10, your image is seen as flex-grow: 0 as further explained at flexbug 6

The fix here is to set your image as flex: none; as per: http://jsfiddle.net/hexalys/knyagjk5/12/, or add an additional container around it. But I'd advise on not making images flex items at all if you don't really need to. In this case, your article container is already a flex-item so I don't think you need to make another nested flex item out of the .details class . That seems unnecessary.