我希望在页面上有一个网格布局，网格可以延伸到整个视口，并且行有一个最小高度。最简单的例子是只有一个单元格的网格（见下面的代码片段）。
我遇到的问题是，当视口的高度小于定义的最小行高时，行会垂直溢出其容器。在下面的例子中添加了红色和绿色边框，可以看到行高不会低于定义的500像素，但网格容器的大小仍然适合现在小于500像素的视口。
如果我从grid类中删除height CSS属性，容器不会缩小到其内容之下，但当视口高于500像素时，它也不会填充垂直空间。我需要height的CSS属性.我'我还添加了min-height: fit-content属性，该属性用于防止height属性的used值小于为min-height，但它不起作用（不使用定义的fit-content值-使用精确值，例如300px，它按预期工作）。
在一个类似的question中，问题是用于间隙的百分比值，但是在这个例子中没有相对大小的东西。即使用固定的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>

我想要的是一个能填满整个 windows 的网格，并且网格容器永远不会小于它的内容。我错过了什么？