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

问题描述

在IE11中，如果您为弹性框定义宽度，并且子元素img的max-width为100％，则它将不遵守max-width.有人找到解决方案了吗?

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?

这在IE10，Chrome和Firefox中有效，但在IE11上却无法使用:
http://jsfiddle.net/3ky60heq/

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>

我知道这个问题曾经被问过，并且有很多不同的答案，但是我在StackOverflow或其他地方找到的每种解决方案都可以有效地将图像宽度强制为100％，或者在其他浏览器上损坏.

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.

推荐答案

我想我已经知道了.如果我在图片上设置了这种样式:

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

flex-shrink: 0;

然后似乎可以全面使用.
http://jsfiddle.net/qgybon8q/2/

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

这篇关于IE11上的Flex-Box中的最大宽度无法正常运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！