为何图片flex items在Firefox与Chrome中表现不一致？

问题场景 #

你尝试将两张固有宽度分别为700px和900px的图片，放入max-width:960px的居中flex容器，期望它们分成两等列（各占480px）。但实际表现出现差异：

• Firefox中图片正常收缩到480px，符合预期；
• Chrome中图片保持固有宽度，直接溢出容器，设置的width:100%未生效，且DevTools中容器的溢出阴影让你困惑。

你发现给图片添加min-width: 0px可以让Chrome和Firefox表现一致，但有两个疑问：

1. 既然设置了width:100%，为何图片无法适配容器宽度？
2. 为什么只有Chrome需要设置min-width:0？

核心原因：Flexbox默认min-width:auto的浏览器实现差异 #

Flex items的默认min-width值为auto，但不同浏览器对这个值的解析逻辑不同：

• Chrome：对于图片这类替换元素，会将min-width:auto解析为图片的固有宽度（即你设置的700px/900px）。这意味着flex item的最小宽度被固定在固有尺寸上，即使容器空间不足，也不能收缩到更小的尺寸，直接导致溢出。
• Firefox：则将min-width:auto的计算逻辑调整为优先参考父容器的可用空间，所以图片能正常收缩到容器分配的宽度，符合你的预期。

疑问解答 #

1. 为什么width:100%没生效？
   width:100%是设置元素的首选宽度，但min-width的优先级更高。当容器空间不足时，元素的宽度不能小于min-width的值。Chrome中min-width:auto等于图片固有宽度，所以即使设了width:100%，图片也无法收缩到固有宽度以下，自然无法适配容器。

2. 为什么只有Chrome需要设置min-width:0？
   这是浏览器对Flexbox规范的实现差异导致的。Firefox的实现更贴合“flex item优先适应容器空间”的设计意图，而Chrome则坚持以元素固有尺寸作为最小宽度的基准。手动设置min-width:0会覆盖Chrome的默认规则，打破固有宽度的限制，让图片能根据容器空间自由收缩。

优化后的代码 #

img {
  width: 100%;
  min-width: 0; /* 覆盖Chrome的默认min-width:auto规则，实现跨浏览器一致表现 */
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 960px;
  display: flex;
}

<p> Two Images side by side , overflows in Chrome but shrinks in Firefox </p>
<div class="wrapper">
  <img src="https://www.unsplash.it/700/300" alt="">
  <img src="https://www.unsplash.it/900/300" alt="">
</div>

内容的提问来源于stack exchange，提问作者Knownow