2

In IE11, if you define a width for a flex-box and a child img element has a max-width of 100%, it will not respect the 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 recognize this question has been asked before and has many different answers however every solution I found on StackOverflow or elsewhere either effectively forces the width of the image to 100% or breaks on other browsers.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Nathan
  • 435
  • 4
  • 16
  • 1
    IE11 has all sorts of bugs with the [Flexible Box Layout Module](http://caniuse.com/#feat=flexbox). Here is a [GitHub page](https://github.com/philipwalton/flexbugs) documenting all know issues with flex-box that might help you. – Justin Taddei Feb 27 '17 at 19:06

1 Answers1

3

I think I have it figured out. If I set this style on the image:

flex-shrink: 0;

then it seems to work across the board.
http://jsfiddle.net/qgybon8q/2/

Nathan
  • 435
  • 4
  • 16
  • `flex-grow` is already 0, by default. `flex-basis` is already `auto`, another default. The only change you made was to `flex-shrink`, changing it from 1 (the default) to 0. That seems to do the trick (no idea why). So all you really need is `flex-shrink: 0`. Cool discovery. – Michael Benjamin Feb 27 '17 at 19:46
  • Yup, I just noticed that. I updated the post. Do you happen to know the best place to go to report the bug/workaround? And thanks for your help. – Nathan Feb 27 '17 at 19:50
  • nice solution! +1 – Nicholas Feb 27 '17 at 21:35