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

According to this bug IE11 doesn't render the items correctly when using min-height in flexbox.

It seems like the problem was solved in Edge, but IE10-11 will not work.

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