align-items,align-self不能在IE11上运行

Question

我这里有一个简单的plunker.

.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中的一个错误.

min-heightIE11中的flex项目无法识别Flex容器上的属性.

如果切换到height: 4em,您将看到您的布局有效.

一个简单的解决方法是制作.container弹性项目.

换句话说,将其添加到您的代码中:

body {
    display: flex;
}

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

无论出于何种原因,通过使Flex容器也成为弹性项,min-height子元素将遵循该规则.

更多详细信息:Flexbugs:min-height在Flex容器上不适用于其flex项目