संरेखित आइटम, संरेखित आत्म 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; 
} 

यह काम कर रहा है कि कैसे मैं यह चाहते क्रोम में 49 के लिए है :

मैं जांच की है कि आईई संगतता मोड में नहीं है - यह नहीं है - यह आईई 11 मोड में है।

यहां क्या हो रहा है?

Answer 1

यह आईई 11 में एक बग है।

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