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 the flexbox layout when being resized to fit their container.

http://jsfiddle.net/minlare/knyagjk5/

<section>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
        <h4>Name</h4>
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis.</p>
        </div>
    </div>
</article>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
        <h4>Name</h4>
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis. Fusce fermentum auctor mauris, auctor lacinia mauris ornare faucibus.</p>
        </div>
    </div>
</article>
</section>

section{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
article{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;

    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.details{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    width: 100%;
    border: 1px solid #666;
}
.image{
    width: 100%;
    max-width: 100%;
}
img{
    width: 100%;
    max-width: 100%;
    height: auto;
}
h4{
    padding: 10px;
    margin-bottom: 0;
}
.description{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

How can this be prevented / fixed?

Answer 1

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.

Answer 2

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.)