html - max-width 在 IE11 上的 Flex-box 中无法正常工作

Question

在 IE11 中，如果您定义了 Flex-box 的宽度，并且子 img 元素的 max-width 为 100%，则它不会遵循 最大宽度。有没有人找到解决方案？

这适用于 IE10、Chrome 和 Firefox，但不适用于 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>

我认识到这个问题以前曾被问过，并且有许多不同的答案，但是我在 StackOverflow 或其他地方找到的每个解决方案要么有效地强制图像宽度为 100%，要么在其他浏览器上中断。

Answer 1

我想我已经弄清楚了。 如果我在图像上设置此样式:

flex-shrink: 0;

那么它似乎可以全面发挥作用。
http://jsfiddle.net/qgybon8q/2/