flex container min-height ignored in IE

Question

As far as I've been able to gather, if working with IE10 / IE11 I should be able to use the standardized flex terms.

I have a container div and 2 child divs.

The 2 child divs are not larger than 400px, so there should always be enough room for the justify-content: space-between.

I want the first child to be all the way at the top and the second child to be all the way at the bottom.

This works in Chrome and Firefox but not in IE, and I have no idea why.

Any comments and feedback are welcome.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

Answer 1

This is a bug in IE10/11. You can find the information at https://github.com/philipwalton/flexbugs#flexbug-3

To fix this bug in IE10/11, add a wrapper element around the flex container that is itself a flex container. In your example, you can add display flex to body tag. And add width 100% style in the container div

Answer 2

IE 10 & 11 have a number of issues with rendering flexbox properly.

Here's one: A flex container doesn't respect the min-height property in these browsers.

A simple solution is to make your flex container also a flex item.

Just add this to your code (no other changes necessary):

body {
   display: flex;
   flex-direction: column;
}

revised fiddle

More info: https://github.com/philipwalton/flexbugs#flexbug-3