web-dev-qa-db-ja.com

align-items、align-selfがIE11で機能しない

ここに簡単なプランカーがあります。

.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：

enter image description here

しかしIE11にはありません：

enter image description here

IEが互換性モードになっていない-そうではない-IE11モードにあることを確認しました。

何が起きてる？

htmlcssflexboxinternet-explorer-11
9
dwjohnston

これはIE11のバグです。

フレックスコンテナーのmin-heightプロパティは、IE11のフレックスアイテムでは認識されません。

height: 4emに切り替えると、レイアウトが機能していることがわかります。

簡単な回避策は、.containerをフレックスアイテムにすることです。

つまり、これをコードに追加します。

body {
    display: flex;
}

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

何らかの理由で、フレックスコンテナーもフレックスアイテムにすることで、min-heightルールは子要素によって尊重されます。

詳細はこちら： Flexbugs：フレックスコンテナのmin-heightは、フレックスアイテムには適用されません

19
Michael_B