在IE中忽略flex容器的最小高度 [英] flex container min-height ignored in IE

问题描述

至于我已经能够收集，如果使用IE10 / IE11，我应该能够使用标准化的弹性术语。

As far as I've been able to gather, if working with IE10 / IE11 I should be able to use the standardized flex terms.

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

I have a container div and 2 child divs.

这两个子div不大于400px，所以应该总是有足够的空间为 justify-空格之间。

The 2 child divs are not larger than 400px, so there should always be enough room for the justify-content: space-between.

我想让第一个孩子一直在顶部和第二个孩子一路在

I want the first child to be all the way at the top and the second child to be all the way at the bottom.

这可以在Chrome和Firefox中使用，但不能在IE中使用。

This works in Chrome and Firefox but not in IE, and I have no idea why.

欢迎任何意见和反馈。

<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时有许多问题。

IE 10 & 11 have a number of issues with rendering flexbox properly.

如 answer by @Dekel ，flex容器不遵守这些浏览器中的 min-height 属性。

As mentioned in the answer by @Dekel, a flex container doesn't respect the min-height property in these browsers.

一个简单的解决方案是让你的flex容器也是一个flex项目。

A simple solution is to make your flex container also a flex item.

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

Just add this to your code (no other changes necessary):

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

revised fiddle

这篇关于在IE中忽略flex容器的最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！