在IE中忽略了flex容器min-height

Question

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

我有一个容器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>

https://jsfiddle.net/akxn68vm/

Answer 1

IE 10和11在正确渲染flexbox方面存在许多问题.

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

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

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

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

修改过的小提琴

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

Answer 2

根据此错误， IE11 在 flexbox 中使用 min-height 时无法正确呈现项目。

问题似乎在 Edge 中解决了，但 IE10-11 不起作用。