IE 11: image does not scale correctly within flexbox

Question

I am trying to use flexbox to place two images in a column. In this case, the width container div is less than the width image. In Chrome, the image fits perfectly in the div container, but not in IE, and I don't know why.

 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/

Here is what I got in IE 11:

Answer 1

IE11 seems to have some problems with the initial value of the flex-shrink property. If you set it to zero (it is initially set to 1), it should work:

 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> 

Answer 2

The decision made destroyed my sticky footers in i.e. So I solved this troubling problem with the following unsatisfactory "ie JS only" .... The value of px instead of "height: auto" helped me.

  if(fuBrowser =='ie'){ var img = $("#teaser img"); img.each(function() { $( this ).css({height: $( this ).height()}); }); } 

Answer 3

Just added flex: 1; so that the child works for me.