对齐项，对齐自不工作的IE11

Question

我有一个simple plunker here.

.container { 
    display:flex; 
    flex-flow: row nowrap; 
    justify-content: space-between; 
    align-items: center; 
    min-height: 4em; 
} 

.nav {  
    flex: 0 0 4em; 
    height: 1em; 
} 

.logo { 
    flex: 1 0 auto; 
    align-self: stretch; 
} 

这是工作我怎么想它在Chrome 49：

但不是在IE11 ：

我已经检查过IE是否处于兼容模式 - 不是 - 它是IE11模式。

这是怎么回事？

Answer 1

这是IE11中的一个错误。

Flex容器上的min-height属性无法在IE11中的Flex项目中识别。

如果您切换到height: 4em，您会看到您的布局有效。

一个简单的解决方法是让.container为flex项目。

换句话说，它添加到您的代码：通过使你的Flex容器还柔性项

body { 
    display: flex; 
} 

.container { 
    width: 100%; /* or flex: 1 */ 
} 

无论出于何种原因，该min-height规则由子元素尊重。

更多细节在这里：Flexbugs: min-height on a flex container won't apply to its flex items