hizalamak-öğeleri, hizaya-kendini IE11

Question

çalışmıyor ben 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; 
} 

Bu istediğin hale çalışıyor Chrome'da 49 zorundayız :

ben IE'nin uyumluluk modunda olmadığını kontrol ettim - değil - IE11 modunda.

Neler oluyor burda?

Answer 1

Bu IE11'de bir hatadır.

Esnek bir kapsayıcıda min-height özelliği IE11'deki esnek öğeler tarafından tanınmıyor.

height: 4em'a geçiş yaparsanız, düzeninizin çalıştığını görürsünüz.

Basit bir çözüm, .container'u esnek bir ürün haline getirmektir. Başka bir deyişle

, kodunuzu bu ekleyin: Hangi nedenle olursa olsun

body { 
    display: flex; 
} 

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

, ayrıca esnek haznesini esnek öğeyi yaparak, min-height kural alt öğeleri tarafından saygı duyulur.

Daha fazla bilgi burada: Flexbugs: min-height on a flex container won't apply to its flex items