最大宽度在IE11上的Flex-Box中无法正常运行



在IE11中,如果您定义了flex-box的宽度,而儿童img元素的max-width为100%,则不会尊重max-width。有人找到了解决方案吗?

这在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%或在其他浏览器上破裂。

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

flex-shrink: 0;

然后它似乎可以全面工作。
http://jsfiddle.net/qgybon8q/2/

最新更新