align-items，align-self在IE11上不起作用

Question

我這里有一個簡單的矮人。

.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切換為height: 4em ，則會看到您的布局有效。

一個簡單的解決方法是使.container成為flex項目。

換句話說，將其添加到您的代碼中：

body {
    display: flex;
}

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

無論出於何種原因，通過使flex容器也成為flex項，子元素會遵守min-height規則。

此處有更多詳細信息： Flexbug：Flex容器上的min-height不適用於其Flex項目