html - 对齐元素，对齐 self 不适用于 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 中的错误。

IE11 中的 flex 元素无法识别 flex 容器上的 min-height 属性。

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

一个简单的解决方法是使 .container 成为 flex 元素。

换句话说，将此添加到您的代码中:

body {
    display: flex;
}

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

无论出于何种原因，通过使您的 flex 容器也成为 flex 元素，min-height 规则将受到子元素的尊重。

此处有更多详细信息:Flexbugs: min-height on a flex container won't apply to its flex items