最大宽度在 IE11 的 flex-box 中无法正常工作

Posted 2023-03-05

【中文标题】最大宽度在 IE11 的 flex-box 中无法正常工作

【英文标题】：max-width not functioning correctly in flex-box on IE11

【发布时间】：2017-07-18 12:45:00

【问题描述】：

在 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>

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

【问题讨论】：

IE11 与Flexible Box Layout Module 存在各种错误。这是一个GitHub page，记录了所有可能对您有所帮助的 flex-box 已知问题。

【参考方案1】：

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

flex-shrink: 0;

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

【讨论】：

flex-grow 默认情况下已经为 0。 flex-basis 已经是 auto，另一个默认值。您所做的唯一更改是 flex-shrink，将其从 1（默认值）更改为 0。这似乎可以解决问题（不知道为什么）。所以你真正需要的是flex-shrink: 0。很酷的发现。

是的，我刚刚注意到了。我更新了帖子。您是否碰巧知道报告错误/解决方法的最佳地点？感谢您的帮助。

不错的解决方案！ +1