css - 1fr 网格子的最大高度

Question

我有一个问题花了我一整天，我无法弄清楚。它看起来很简单，我敢肯定我以前做过类似的事情，但现在它让我发疯了。

我有 3 列的网格容器。网格容器有width和height等于100vw和100vh。第三列也是一个网格容器，带有grid-template-rows: auto 1fr. 该1fr元素是一个包含许多孩子的列表。整个身体不应该伸展，如果列表达到其最大高度应该有滚动条。

问题是它根本不会这样做，无论我使用什么方法。我不能使用px，它应该是完全响应的。

我制作了StackBlitz 版本。问题在于绿色元素。你能帮我解决这个问题吗？

body, html {
  padding: 0;
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: blue;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-container {
  background-color: red;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
}

.list {
  background-color: green;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.element {
  font-size: 40px;
}

<div class="container">
  <div>a</div>
  <div>b</div>
  <div class="grid-container">
    <div>
      <h1>A</h1>
    </div>
    <div class="list">
      <div class="element">A</div> <!-- 50x -->
    </div>
  </div>
</div>

标签： css