html – 在IE中忽略flex容器min-height

据我所知,如果使用IE10 / IE11,我应该可以使用标准化的弹性术语.

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

2个孩子的div不大于400px,所以应该总是有足够的空间来证明内容：空间.

我希望第一个孩子一直在顶部,第二个孩子一直在底部.

这适用于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>

https://jsfiddle.net/akxn68vm/

解决方法

IE 10& 11有正确渲染flexBox的许多问题.

这是一个：Flex容器不尊重这些浏览器中的min-height属性.

一个简单的解决方案是使您的Flex容器也成为弹性项目.

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

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

revised fiddle

更多信息：https://github.com/philipwalton/flexbugs#flexbug-3