CSS网格的多行项目推送单行

Question

我在CSS网格中遇到了多行项目的问题。我不确定它是按设计还是奇怪的行为。

.container {
    display: grid;
    grid-template-columns: 65% 35%;
    grid-template-rows: min-content auto;
    grid-template-areas: "head side" "body side";
}
.item-head {
    grid-area: head;
}
.item-body {
    grid-area: body;
}
.item-side {
    grid-area: side;
}

基本上，项目侧跨越右侧的两行。虽然 head 片段位于左侧第一行，但 head 的高度应该是它的最小内容，但它实际上是由侧内的内容推动的>

以下是codepen

上的演示

这是我做过的修复之一，尝试使用auto进行头部修复。 auto

但是当网格行是自动时，它有其他麻烦。 here示例演示正文没有足够内容的情况。

我提出的最终版本是this。其中不使用2x2网格，而只使用两列。

从MDN，我们可以看到min-content是一个关键字，表示占据网格轨道的网格项的最小内容贡献。

这很有意义，但它怎么会被多排内容推开呢？如果一个项目跨越2行，那么它应该只推动那两行高度，而不是第一行的高度。我对此有点困惑，如果有人能解释发生的事情会很棒。

修改： 如果我们使用1fr作为body件，则内容会正确显示。现在，只有来自MDN的IE Edge支持fr单位，也称为剩余空间的一部分。来自CSS-Tricks评论的其他来源，人们说它与网格布局一起使用。

我在最新的firefox和chrome上测试过fr，它运行正常。

但问题仍然存在，side区域包含2行，其上下文为2行，而头部和正文的上下文为1行。这些1行内容之间的行由来自2行区域的内容调整。无论auto的计算是什么，它都应该忽略任何与之无关的内容。

这个问题的关键是，跨两行的单元格应该只影响两行的总高度，但不会对单个行造成任何更改。我在WPF网格系统上从未遇到过相同的问题，但在CSS网格中，这是我见过的一种奇怪的行为。

Answer 1

这很奇怪：当我（使用Opera 54.0）未在项目侧设置溢出时，结果有所不同。但是仍然不知道是什么定义了高度……

无论如何：我在某处读到，min-content和max-content不适用于列-仅适用于行。这可以解释奇怪的行为。

在此提到了此来源： https://drafts.csswg.org/css-sizing-3/#sizing-values