柔性集装箱最小高度在IE中被忽略

据我所知，如果使用IE10/IE11，我应该可以使用标准化的柔性条款。柔性集装箱最小高度在IE中被忽略

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

来源

2016-11-08 Timon

我增加了容器的背景颜色。（黄色）。你可以在jsFiddle上看到IE中的容器是400px。 – Timon

作为@GCyrillus在IE浏览器中使用flex和'flex-direction：column'的'min-height'不能正常工作，请使用'height'代替 – blonfu

IE 10 & 11在正确渲染flexbox时存在一些问题。

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

一个简单的解决方案是让你的柔性容器也是一个柔性物品。

只需添加到您的代码（没有必要的其他变化）：

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

revised fiddle

来源

2016-11-08 15:58:36

感谢解决方案。即使是最小高度属性也是在错误的flex容器之外，只要将此方法添加到具有最小高度的元素中，此解决方案就会工作 – ggzone

根据this bug在Flexbox的使用最小高度时IE11不正确呈现的项目。

看来问题已在Edge中解决，但IE10-11无法正常工作。

来源

2016-11-08 15:52:06 Dekel

柔性集装箱最小高度在IE中被忽略

回答

相关问题