max-width and flex in IE11 does not work

Question

I am having an issue using flex box and max width in IE11. I did search the web and I saw some solutions but NONE of them worked for me and that is why I posted a new thread. Here is my code:

 .story-img { padding: 0px 0px 6px 0px; display: flex; justify-content: center; align-items: center; flex:1; } .story-img img { cursor: pointer; max-width: 100%; height: auto; flex-shrink: 0; } .row { width: 100px; } 

 <div class="row"> <div class="col-xs-12 story-img"> <div> <img class="img-responsive11" alt="" src="https://s3.amazonaws.com/resized.images.stg1.telegraphjournal.com/251861/desktop/comey-mob-analysis-56581436-3f0b-11e8-a7d1-e4efec6389f0.jpg"> </div> </div> </div> 

So as you see I am using max-width to control the image of a bigger size. It works in all browsers except IE(I use IE11). Here is the codepen example of that: https://codepen.io/hminaee/pen/wXNjBK#code-area

Can you please help me?

Answer 1

In this case, I think the only thing you're missing is a width limit on the div parent of the image.

Just add this to your code:

.story-img > div { width: 100% }

revised codepen