आईई 11: फ्लेक्सबॉक्स

Question

के भीतर छवि सही ढंग से स्केल नहीं होती है, मैं कॉलम में दो छवियों को रखने के लिए फ्लेक्सबॉक्स का उपयोग करने की कोशिश कर रहा हूं। इस मामले में, div कंटेनर की चौड़ाई छवि की चौड़ाई से छोटी है। Div कंटेनर सही क्रोम में छवि फिट बैठता है, लेकिन यह आईई में नहीं है, और मुझे नहीं पता क्यों।

div.outer { 
 
    width: 400px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
div.inner { 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <img src="http://placehold.it/480x360"> 
 
    </div> 
 

 
    <div class="inner"> 
 
    <img src="http://placehold.it/480x360"> 
 
    </div> 
 
</div>

https://jsfiddle.net/Yifei/16cpckqk/

यह है कि मैं क्या IE 11 में मिल गया है है:

Answer 1

IE11 का प्रारंभिक मूल्य के साथ कुछ परेशानी है लगता है flex-shrink property। आप शून्य करने के लिए यह सेट करते हैं (इसे शुरू में 1 पर सेट है), यह काम करना चाहिए:

div.outer { 
 
    width: 400px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 
div.inner { 
 
    flex-shrink: 0; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <img src="http://placehold.it/480x360"> 
 
    </div> 
 

 
    <div class="inner"> 
 
    <img src="http://placehold.it/480x360"> 
 
    </div> 
 
</div>