IE中忽略了flex容器的最小高度

Question

据我所知，如果使用IE10 / IE11，我应该可以使用标准化的flex术语。

我有一个容器div和2个子div。

2个子div不能大于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>

Answer 1

IE 10和11在正确渲染flexbox时存在许多问题。

这是一个：flex容器min-height在这些浏览器中不尊重该属性。

一个简单的解决方案是使flex容器也成为flex项。

只需将其添加到您的代码中（无需其他更改）：

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