CSS网格行垂直溢出其容器

Question

我希望在页面上有一个网格布局，其中网格延伸到整个视口，行的高度最小。最简单的例子是一个带有单个单元格的网格(请参阅下面的代码片段(。

我遇到的问题是，当视口的高度小于定义的最小行高度时，行会垂直溢出其容器。在下面的示例中添加了红色和绿色边界，可以看到行的高度没有低于定义的500像素，但网格容器的大小仍然与现在短于500像素的视口相匹配。

如果我从grid类中删除heightCSS属性，容器不会收缩到其内容下方，但当视口高于500像素时，它也不会填充垂直空间。由于我希望网格填充整个页面，所以我需要heightCSS属性。我还添加了min-height: fit-content属性，该属性旨在防止height属性的使用值小于为min-height指定的值，但它不起作用(不适用于定义的fit-content值-它适用于预期的精确值，例如300px(。

在一个类似的问题中，罪魁祸首是用于缺口的百分比值，但在这种情况下，没有相对大小的东西。即使将grid-template-rows: minmax(500px, 1fr);属性替换为固定的grid-template-rows: 500px;，它的行为仍然相同。

body {
margin: 0;
}
.grid {
display: grid;
grid-template-rows: minmax(500px, 1fr);
height: 100vh;
min-height: fit-content;
width: 100vw;
}
.bordered {
border: 10px solid green;
}

<div class="grid bordered" style="border-color: red;">
<div class="bordered">Some content</div>
</div>

我想要的是一个填充整个视口的网格，其中网格容器永远不会小于其内容。我错过了什么？

Answer 1

需要知道的是，只要一行的最小高度或多行的组合高度大于视口的高度，就会出现滚动。除此之外，我希望下面的片段能满足您的需求。我在代码中添加了注释。

/* lines I added */
*{
box-sizing: border-box;
}
body {
margin: 0;
}

.grid {
display: grid;
/* 100 is for the small viewport here in the code snippet */
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
min-height : 100vh;

}
.bordered {
border: 10px solid green;
}

<div class="grid bordered" style="border-color: red;">
<div class="bordered">Some content</div>
</div>