为什么图像弹性项目在 Firefox 和 Chrome 中表现不同？

Question

我正在学习 Flexbox 以及如何将 Flex 项目放置在 Flex 容器内，其初始宽度为 Flex-basis，然后分别在存在负空间和正空间时收缩和增长。然而，当我在实践中尝试这一点时，我发现当弹性项目是图像时，它在两个浏览器（Firefox 和 Chrome）上的工作方式存在差异。

假设我想要两个 Flex 项目，它们是图像（700px 和 900px 宽），位于最大宽度为 960px 的居中 Flex 容器内的两个相等的列中。

img {
  width: 100%;
}

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

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

在 Firefox 中，它们按照我的预期工作。每个 Flex 图像的基本尺寸为：960 px（图像宽度 = Flex 容器宽度的 100%），然后缩小到每个 480 px。然而，在 Chrome 中，图像具有其固有宽度（700 和 900 px）并且溢出了 Flex 容器（父 Flex 容器的图像宽度 100% 不起作用）。另外，在 Chrome 检查器中，如果我将鼠标悬停在 Flex 容器上，我会看到 Flex 容器的溢出区域被遮蔽了

我之前了解到弹性容器的阴影部分显示了当项目的宽度为最大内容时可用于增长的空白空间。所以，我真的不明白为什么在这种情况下弹性容器中的溢出区域显示为阴影，因为我无法想象项目会增长到该空间。

我了解到（为什么弹性项目不会缩小超过内容大小？）您可以通过将图像的最小宽度设置为 0 之类的值来解决此问题

img {
min-wdth : 0px 
}

此 CSS 确实使 Chome 在显示弹性框时表现得像 Firefox，但我不确定为什么。我从 Stackoverflow 的答案中了解到，对于图像来说，最小宽度 = 最小内容是图像的固有大小，因此它不能缩小到低于该大小。然而，对我来说没有意义的是，为什么当图像的宽度为 100% 时，图像的宽度不会增加（增加到父级 Flex 容器宽度 960px），因为它大于 min-width = min-content图像数量（960 px > 700px 或 900px ）以及为什么对于一种浏览器您需要添加 min-width:0px 而对于另一种浏览器则不需要。

Answer 1

作为弹性项目的图像是出了名的古怪。它们在不同的浏览器上呈现不同的效果。该解决方案似乎在所有浏览器中都可靠且一致地工作，是将图像包裹起来，例如包裹在

div

中。

img {
  width: 100%;
  vertical-align: top; /* remove descendere space */
}

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

<div class="wrapper">
  <div><!-- new wrapper -->
    <img src="https://www.unsplash.it/700/300" alt="">
  </div>
  <div><!-- new wrapper -->
    <img src="https://www.unsplash.it/900/300" alt="">
  </div>
</div>