CSS 网格行垂直溢出其容器

Question

我想在页面上使用网格布局，其中网格延伸到整个视口，并且行具有最小高度。最简单的示例是具有单个单元格的网格（参见下面的代码片段）。

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

如果我从 grid class 中删除 height CSS 属性，容器不会缩小到其内容以下，但也不会填充当视口高于 500 像素时，垂直 space。因为我想让网格填满整个页面，所以我需要 height CSS 属性。我还添加了 min-height: fit-content 属性，该属性应该可以防止 height 属性的使用值变得小于 min-height 指定的值，但它不会工作（不使用定义的 fit-content 值 - 它按预期使用精确值工作，例如 300px）。

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

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>

CSS 网格行垂直溢出其容器

CSS grid row overflows its container vertically

html

css

css-grid