Міні-висота flex контейнера ігнорується в IE - html, css, css3, internet explorer, flexbox

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

У мене є контейнерний дів та 2 дитячі діви.

Дві дочірні діви не більше 400 пікселів, тому завжди має бути достатньо місця для 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="/images/http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
</div>
</div>

https://jsfiddle.net/akxn68vm/

Відповіді:

У IE 10 та 11 виникає ряд проблем із належним відображенням флекси.

Ось одне: гнучкий контейнер не поважає min-height властивість у цих браузерах.

Просте рішення - зробити ваш гнучкий контейнер також гнучким предметом.

Просто додайте це до свого коду (ніяких інших змін не потрібно):

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

перероблена скрипка

Більше інформації: https://github.com/philipwalton/flexbugs#flexbug-3

Відповідно до ця помилка IE11 не відображає елементи правильно при використанні міні-висоти в flexbox.

Здається, проблему вирішено в Edge, але IE10-11 не буде працювати.