如何阻止Firefox在包含max-width/height为100%的图片时拉伸弹性项目？

这个跨浏览器的flex布局差异确实挺闹心的，我帮你捋清楚怎么搞定它！

首先得说清楚原因：Firefox和Chrome对于未显式设置flex属性的flex子项，默认处理逻辑有细微差别。Firefox会默认让子项拉伸填满容器（效果近似flex: auto），而Chrome则更倾向于保留子项的固有内容尺寸，这就导致了你看到的不一致表现。

核心解决方案：给Flex子项设置flex: initial #

最直接的办法就是给两个图片容器显式设置flex: initial（等价于flex: 0 1 auto），明确告诉浏览器：不要让子项主动放大，只在容器空间不足时允许缩小，并且基于子项自身的固有尺寸来布局。

修改后的完整代码如下：

.container { 
  height: 400px; 
  display: flex; 
}
/* 新增这行关键样式 */
.container > div {
  flex: initial;
}
img { 
  max-width: 100%; 
  max-height: 100%;
  /* 可选：保持图片比例不被挤压变形 */
  object-fit: contain;
}

<div class="container">
  <div style="background-color:gainsboro">
    <img src="https://source.unsplash.com/random/900×700/?fruit" alt="水果图片">
  </div>
  <div style="background-color: chocolate;">
    <img src="https://source.unsplash.com/random/900×700/?flower" alt="花卉图片">
  </div>
</div>

补充说明 #

• flex: initial的拆解：flex-grow: 0（禁止子项放大）、flex-shrink: 1（允许子项缩小）、flex-basis: auto（以子项自身内容尺寸为基准），完美匹配Chrome的默认表现。
• 如果希望图片在容器内保持完整比例不被拉伸/挤压，可以加上object-fit: contain，这个属性会让图片自适应容器尺寸的同时维持原有宽高比。

这样设置之后，Firefox里的flex子项就不会再强制拉伸填满容器，和Chrome的表现完全一致啦！

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