如何让Grid布局中的Content元素垂直撑满高度（不转Flex/不用calc）

我有一个由菜单、页眉、内容组成的简单Grid布局，希望蓝色的content元素能够垂直拉伸。可以看到黄色的grid容器（contentWrapper）已经垂直拉伸，但内部的蓝色content元素（动态内容载体）并未实现。请问是否能在以下两个前提下实现需求：
1）不将整个Grid结构切换为Flexbox；
2）不使用calc计算100vh减去页眉高度。

代码示例 #

CSS #

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "menu header" "menu content";
  box-sizing: border-box;
  overflow: hidden;
}

.mainMenuWrapper {
  grid-area: menu;
  height: auto;
}

.headerWrapper {
  grid-area: header;
  height: auto;
}

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
}

.menu {
  height: 100vh;
  background-color: red;
  width: 50px;
}

.header {
  height: 80px;
  background-color: green;
}

.content {
  background-color: blue;
  width: 100%;
  height: ???
}

HTML #

<div class="container">
  <div class="mainMenuWrapper">
    <div class="menu">
      menu
    </div>
  </div>
  <div class="headerWrapper">
    <div class="header">
      header
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      content
    </div>
  </div>
</div>

效果截图 #

可以通过以下两种方式实现，均满足你的前提要求：

方法1：将contentWrapper设为Grid容器 #

让contentWrapper也成为Grid布局容器，内部的content会自动拉伸占满可用空间：

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
  display: grid; /* 添加该行 */
}

.content {
  background-color: blue;
  width: 100%;
  height: 100%; /* 或直接移除height属性，Grid子项默认拉伸 */
}

方法2：使用绝对定位 #

给contentWrapper设置相对定位，让content绝对定位填充整个容器：

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
  position: relative; /* 添加该行 */
}

.content {
  background-color: blue;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

内容的提问来源于stack exchange，提问作者sir-haver