如何评估 CSS 网格中大网格区域旁边的一行的 max-content 和 min-content？

Question

根据 MDN 文档（https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows）：

最小内容

是表示占据网格轨道的网格项的最大最小内容贡献的关键字。

所以，在这个例子中：

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: max-content max-content max-content min-content;
  grid-template-areas:
    "one aside"
    "two aside"
    "three aside"
    "four aside"
}

.one {
  background: red;
  grid-area: one;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}

.four {
  background: yellow;
  grid-area: four;
}

.aside {
  background: grey;
  grid-area: aside;
}

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
  <div class="four">
    Four
  </div>
  <div class="aside">
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
  </div>
</div>

为了获得“min-content”值，为第四行评估的高度值是多少？评估的旁边网格区域的第四行的高度是min-content多少？

https://jsfiddle.net/oygf360r/

在@temani-afif 评论后编辑：

为了澄清问题。我理解min-content在这种情况下的行为。我想知道的是浏览器如何计算这个值，因为第二列在该行中没有任何内容，因为旁列列的内容属于所有行。在这种情况下， 浏览器是否只是忽略了旁边的列进行比较？或者这些元素有什么特殊的价值？

我也将其标记为浏览器，因为可能与它更相关。

Answer 1

如果我没记错的话，这是一种边缘情况，这种情况是由于如何处理多个网格轨道上的元素（由规范的浏览器实现）来确定网格大小所致。

在您的示例中，确定行分配空间的算法无法根据grid-template-rows属性值满足重新分区，因此在 Chrome 中，当前（2021 年 12 月）所有行都设置为自动：

如果您将至少一行设置为 1fr，算法会正确分配行之间的空间：

浏览器处理该问题的差异：（
目前 Firefox 与 Google Chrome 的做法相同）