IE 11: изображение не масштабируется правильно в flexbox

Question

Я пытаюсь использовать flexbox для размещения двух изображений в столбце. В этом случае ширина контейнера div меньше ширины изображения. Контейнер div идеально подходит для изображения в Chrome, но он не в IE, и я не знаю, почему.

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>