html - Firefox 中的 Flex 会自动缩小图像，但 Chrome 中不会

Question

<h1>Window width:</h1>

<div style="display: flex">
  <img src="https://unsplash.it/400/225?image=10" alt="1">
  <img src="https://unsplash.it/400/225?image=11" alt="2">
  <img src="https://unsplash.it/400/225?image=12" alt="3">
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <img src="https://unsplash.it/400/225?image=10" alt="1">
    <img src="https://unsplash.it/400/225?image=11" alt="2">
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

这是在 Firefox 中的结果:

这是 Chrome 中的结果:

如您所见，在 Firefox 中，图像已被很好地缩小和调整大小，因此所有图像都可以排成一行，而无需换行或裁剪。在 Chrome 上，图像保持其原始大小，这会导致在小窗口或 div 中被裁剪。

这是预期的吗？难道我做错了什么？如何在 Firefox 和 Chrome 中获得相同的结果？

Answer 1

这些是 flex 容器中的初始设置:

• flex-grow: 0
• flex-shrink: 1
• flex 基础:自动

简写为:

• flex :0 1 自动

因此，即使您没有在代码中指定这些规则，它们也适用于图像。

图像不能增长，它们可以缩小(相等且刚好足以避免溢出容器)，并且它们的初始大小为自然宽度 (400px)。

这就是您在 Firefox 中看到的。图像正在缩小以很好地适合容器。

在 Firefox 中， flex 规则会覆盖图像的自然尺寸。

然而，在 Chrome 中，情况正好相反。图像尺寸为准。

简单的跨浏览器解决方案是将图像包装在另一个元素中，因此这个新的包装器成为 flex 元素并采用默认的 flex: 0 1 auto，并且不需要覆盖任何内容.

img {
  width: 100%;
}

<h1>Window width:</h1>

<div style="display: flex">
  <span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
  <span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
  <span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
    <span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
    <span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
  </div>
</div>

就哪个浏览器遵守规范指南而言，似乎是 Firefox。在 flex 容器中，应以 flex 规则为准:

7.1. The flex Shorthand

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

The flex item’s main size property is either the width or height property.

我说 Firefox“看起来”是正确的，因为规范说 flex 规则应该优先于 CSS width 和 height 属性。

当然，本例中图片的尺寸并没有在 CSS 中定义。它们是图像的自然尺寸。因此，这种情况可能会留待解释，Chrome 可能没有违反任何准则。

然而，在另一种情况下，height 属性是一个因素，Firefox 坚持使用 flex，而 Chrome 使用 height:Why is Firefox not honoring flexed div's height, but Chrome is?