3

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Hamed Minaee
  • 2,480
  • 4
  • 35
  • 63
  • flexbox and max-width have issues in the IE11..one thing you can try is change `max-width` to `width:100%` in `.story-img img` – Aravind S Jul 02 '18 at 04:58
  • Your `img` element has flex properties applied, but it doesn't appear to be a flex item. https://stackoverflow.com/a/37844240/3597276 – Michael Benjamin Jul 02 '18 at 11:38
  • You have `flex: 1` applied on `.story-img`. The `flex` property doesn't always work well in IE. https://stackoverflow.com/q/32239549/3597276 – Michael Benjamin Jul 02 '18 at 11:40
  • @Michael_B So does it mean that for IE I need to define it own class of css to use display block instead? – Hamed Minaee Jul 02 '18 at 16:20

1 Answers1

0

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701