Flex容器内图片在Chrome与Firefox显示不一致，如何实现Firefox效果？

该布局在Chrome中显示效果与Firefox不一致。我尝试给图片添加flex: 0 0属性，但无法影响它的尺寸。想请教能不能在不为图片添加div包裹、不设置图片固定尺寸的前提下，实现Firefox里的显示效果？

代码示例 #

CSS

div {
  display: flex;
  gap: 5vw;
}

img {
  width: 100%;
  height: auto;
}

HTML

<div>
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
</div>

更新：给图片设置任意px单位的宽度后，显示就恢复正常了。这会不会是Chrome的bug？

可以给图片添加min-width: 0属性，同时保留width: 100%，就能在Chrome中实现和Firefox一致的效果，无需额外包裹div或设置固定尺寸。调整后的CSS如下：

div {
  display: flex;
  gap: 5vw;
}

img {
  width: 100%;
  height: auto;
  min-width: 0;
}

原因是Chrome中flex项目默认的min-width: auto会限制元素收缩，导致图片无法根据容器空间自动调整；而Firefox中flex项目的收缩逻辑更宽松。添加min-width: 0可以打破这个限制，让图片能正常收缩适配flex容器的空间。

你提到设置px宽度后恢复正常，是因为明确的宽度值会覆盖默认的min-width: auto行为，本质和添加min-width: 0的作用类似，但后者不需要固定尺寸，适配性更强。

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