Firefox 和 Chrome 中 Flexbox 的不同实现

Question

以下代码在 Firefox 中按预期工作，但在 Chrome 中，图像变得比 flex 容器大得多。

.r {
  width: 100%;
  height: auto;
  min-width: unset;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

火狐：

铬：

Answer 1

以下代码在 Firefox 中按预期工作

我不同意这一点，因为对我来说 Chrome 的表现符合预期有两个原因：

1. 您将图像的宽度设置为100%，这意味着由 定义的其包含块（容器）的 100% 600px。所以每个图像将是600px

2. 由于默认配置，图像无法缩小到超过其内容大小min-width（请注意，使用unset相当于initial在这种情况下，所以它在某种程度上是无用的）。所以图像将保留在600px

如果添加min-width:0图像将仅缩小宽度：

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

chrome 的行为似乎已经改变，因此在上一个版本中不再需要以下内容

现在，如果我们考虑您所面对的高度，stretch两个浏览器中的效果也不相同。^解释1有点棘手，但如果你更改默认对齐方式，你将在 chrome 中得到预期的结果：

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
  align-items:flex-start;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

或者，如果您使用百分比值更改高度，您将使其失败并获得您想要的内容（这有点棘手，因为我们正在触发另一个问题来修复实际问题）

.r {
  width: 100%;
  height:658%; /*any value here with %*/
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

为什么 Firefox 会有这样的表现？

我不太清楚，但逻辑上的解释是，Firefox 不考虑默认min-width配置，而是优先考虑保持比例而不是拉伸效果。

¹最初，您的图像定义容器的高度，因为它们很大（高度约为 700px），容器使用该高度，然后我们将属性应用于图像，以便它们缩小宽度，并且由于默认对齐方式是拉伸它们将拉伸到容器的高度，该高度最初由它们自己的初始高度定义，从而创建此渲染。

如果我们删除拉伸效果，图像将尝试保持其比例，因为我们删除了高度限制。

如果我们考虑身高的百分比值，则逻辑相同。这个会失败auto，我们会回到默认行为（保持纵横比）

另一种选择

出现此问题的原因是使用具有内在尺寸的替换元素的图像，其中宽度/高度的计算不像其他元素那么简单。

为了避免这种行为，最好将图像包裹在 a 内div，并避免将它们作为弹性项目。

.r {
  width: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
</div>