ALIGN-項目は、ALIGN-自己を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に持っています：

I IEが互換モードにないことを確認しました。IE11モードです。

ここでは何が起こっていますか？

Answer 1

これはIE11のバグです。

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

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

単純な回避策は、.containerをフレックスアイテムにすることです。言い換えれば

、あなたのコードにこれを追加します。

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