尝试使用CSS网格创建以下布局，其中只有主元素应该是可滚动的。

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

这是一个stackblitz: https://stackblitz.com/edit/web-platform-p4nanm?file=index.html，styles.css

这是当前的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;
}

& quot怪异& quot问题是如果我加上:

overflow: auto;

到side元素CSS规则，那么side和main元素都将滚动，并按照我预期的方式工作。

但是如果溢出:auto规则从旁边移除，那么主元素中的大部分内容都会消失，并且也不会滚动。

怎么才能做到只有主元素滚动？

该解决方案将被设置为搁置{最小高度:0；}，因为默认情况下它有auto，不会从中收缩。或者除了visible之外的任何溢出值。

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

header {
  background-color: gold;
}

div {
  display: grid;
  grid-template-columns: auto 1fr;
  background-color: burlywood;
  overflow: hidden;
}

aside {
  max-width: 10rem;
  min-height: 0; /*