Max-width does not work correctly in flex-box on IE11

Question

In IE11, if you define a width for a flexible window, and the img child has a max-width 100%, it will not respect max-width . Has anyone found a solution for this?

This works in IE10, Chrome and Firefox, but breaks for IE11:
http://jsfiddle.net/3ky60heq/

 .container { display: -ms-flexbox; display: -webkit-flex; display: flex; width: 500px; height: 125px; } .image1 { width: 100%; } .image2, .image3 { max-width: 100%; } 

 <div class='container'> <img class='image1' src="https://clagnut.com/sandbox/imagetests/wideimg.png"> </div> <div class='container'> <img class='image2' src="https://clagnut.com/sandbox/imagetests/wideimg.png"> </div> <div class='container'> <img class='image3' src="https://clagnut.com/sandbox/imagetests/smimg1.jpg"> </div> 

I understand that this question was asked earlier and has many different answers, however, every solution I found in StackOverflow or elsewhere effectively forces the image width to 100% or breaks in other browsers.

Answer 1

I think I get it. If I set this style on the image:

 flex-shrink: 0; 

then he seems to be working in all directions. http://jsfiddle.net/qgybon8q/2/