Минимальная высота гибкого контейнера игнорируется в IE

Насколько мне удалось собрать, если я работаю с IE10/IE11, я должен использовать стандартные условия flex.

У меня есть контейнер div и 2 дочерних div.

2 дочерних divs не больше 400px, поэтому всегда должно быть достаточно места для justify-content: space-between.

Я хочу, чтобы первый ребенок был полностью наверху, а второй ребенок был полностью на дне.

Это работает в Chrome и Firefox, но не в IE, и я понятия не имею, почему.

Любые комментарии и отзывы приветствуются.

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

Ответы

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