IE 11: Görüntü esnek kutu içinde doğru şekilde ölçeklenmiyor

Question

İki resmi bir sütuna yerleştirmek için flexbox kullanıyorum. Bu durumda, div kabının genişliği görüntünün genişliğinden daha küçüktür. Div konteyner mükemmel görüntüyü Chrome'a ​​sığdırır, ancak IE'de yoktur ve nedenini bilmiyorum. https://jsfiddle.net/Yifei/16cpckqk/

Bu

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>

IE 11'de ne var ise:

Answer 1

IE11 başlangıç ​​değeri ile bazı sorunlar var gibi görünüyor flex-shrink property.

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>