Минимальная высота гибкого контейнера игнорируется в 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>

Ответ 1

IE 10 и 11 имеют ряд проблем с рендерингом flexbox.

Здесь один: контейнер flex не уважает свойство min-height в этих браузерах.

Простое решение - сделать ваш гибкий контейнер также гибким.

Просто добавьте это в свой код (никаких других изменений не требуется):

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

пересмотренная скрипка

Дополнительная информация: https://github.com/philipwalton/flexbugs#flexbug-3

Ответ 2

Согласно эта ошибка IE11 не отображает элементы правильно при использовании min-height в flexbox.

Кажется, проблема решена в Edge, но IE10-11 не будет работать.

Ответ 3

Это ошибка в IE10/11. Вы можете найти информацию на https://github.com/philipwalton/flexbugs#flexbug-3

Чтобы исправить эту ошибку в IE10/11, добавьте элемент оболочки вокруг гибкого контейнера, который сам является гибким контейнером. В вашем примере вы можете добавить display flex к тегу body. И добавьте ширину 100% стиль в контейнере div