使最后一个CSS网格行填充剩余空间

Question

我已经尝试了对Nav和Content的许多高度调整，但是没有任何办法使它填充到页面底部的剩余空间。每行在内容结束处结束...

我想要实现的目标

现在的样子

auto属性不是应该对最后一行的高度进行排序吗？

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px auto;
  grid-template-areas: ". ." ". .";
}

nav {
  grid-row-start: 2;
  grid-row-end: 3;
}

main {
  grid-row-start: 2;
  grid-row-end: 3;
}

<div class="grid-container">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
</div>