Chrome和Firefox中的CSS网格行为不同[重复]

Question

我有一个 2 列和 3 行的 CSS 网格。由于角度 ngif 子句，第三行内容并不总是存在。图像出现在跨越 3 行的第一列中。尽管如此，我在 Chrome（80.0.3987.87，这是我发布的最新稳定版）和 Firefox 中得到了 2 个不同的结果。

有没有办法控制行，使其表现得像在 Firefox 中一样，即当图像高度大于 2 个第一行高度的总和时，第三行会增长。

.grid {
  width:400px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
}

.image {
  width:40px;
  height:100px;
  grid-column:1;
  grid-row:1 / span 3;
  background-color: #f00;
}

.text1 {
  grid-column:2;
  grid-row:1;
}

.text2 {
  grid-column:2;
  grid-row:2;
}

<div class="grid">
  <div class="image"></div>
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

这是您可以在 Chrome 和 Firefox 中查看的codepen。

这里有一张图片来显示差异：

如您所见，Chrome 增加了第 1 行和第 2 行的高度（第 3 行保持为 0）。 Firefox 只增加 row2 的高度，即最后一个可见的内容行。

请注意，我尝试将 grid-template-rows 设置为“minmax(0, auto) minmax(0, auto) 1fr”，但随后第 3 行会有一个奇怪的高度，使网格高度大于其内容。

更新：啊！能够在以前的 Chrome 版本 (79) 上尝试它，这次我得到了与 Firefox 相同的结果。所以似乎80改变了它。这里有人可以确认一下吗？

Answer 1

您可以像下面这样更新您的代码。它似乎在 Chrome 80 和 firefox 中工作相同。值得注意的是，1fr 等于 minmax(auto, 1fr)，这确实与 minmax(0,1fr) 不同，但仍然不知道究竟是什么让两者的行为不同。

.grid {
  width:400px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto 1fr;
}

.image {
  width:40px;
  height:100px;
  grid-column:1;
  grid-row:1 / span 3;
  background-color: #f00;
}

.text1 {
  grid-column:2;
  grid-row:1;
}

.text2 {
  grid-column:2;
  grid-row:2;
}

<div class="grid">
  <div class="image"></div>
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

Answer 2

您提到容器的网格模板行的方式在 chrome 中无效。我想这就是问题

试试这个 css 看看；

<style>
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.image {
    height: 100px;
    grid-row: 1/4;
    background-color: #f00;
}

.text1 {
    grid-column: 2;
    grid-row: 1;
}

.text2 {
    grid-column: 2;
    grid-row: 2;
}
</style>

希望有帮助！！