Flexbox 'space-between' not working in IE11 [duplicate]

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

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