如何用CSS Grid实现仅main元素可滚动的网格布局？

我尝试用CSS Grid构建如下布局，要求仅<main>元素可滚动：

<header>header</header>
<div>
  <aside></aside>
  <main>
  </main>
</div>
<footer>footer</footer>

当前使用的CSS代码：

body {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 0px;
  margin: 0px;
}

header {
  background-color: gold;
}
div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  background-color: burlywood;
  overflow: hidden;
}
aside {
  max-width: 10rem;
}
main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: auto;
}
footer {
  background-color: aqua;
}

p {
  background-color: lightgreen;
}

main p {
  background-color: gray;
}

遇到的问题：给<aside>加overflow: auto;时，<aside>和<main>都能滚动，符合预期；但移除这个规则后，<main>内大部分内容消失且无法滚动。需要实现仅<main>元素可滚动。

问题根源是Grid布局的默认对齐逻辑：Grid项默认用align-items: stretch，但如果子元素内容高度超出容器，且没有给Grid项设置明确高度约束，父容器会被内容撑开，导致overflow: auto无法触发。

要让<main>单独滚动，只需给<aside>设置height: 100%，强制它占满父容器的高度，避免父容器被<aside>的内容撑开，这样<main>的高度就能被正确约束，滚动规则就能正常生效。

修改后的CSS代码：

body {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  margin: 0;
}

header {
  background-color: gold;
}
div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  background-color: burlywood;
  overflow: hidden;
}
aside {
  max-width: 10rem;
  height: 100%; /* 新增：强制aside占满父容器高度 */
}
main {
  overflow: auto; /* 无需嵌套Grid，直接设置滚动即可 */
}
footer {
  background-color: aqua;
}

p {
  background-color: lightgreen;
}

main p {
  background-color: gray;
}

另外，<main>里不需要额外嵌套Grid布局，直接设置overflow: auto就能实现滚动效果，可简化代码。

内容的提问来源于stack exchange，提问作者Ole