嘗試使用CSS網格創(chuàng)建以下布局，其中只有主元素應該是可滾動的。

<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規(guī)則，那么side和main元素都將滾動，并按照我預期的方式工作。

但是如果溢出:auto規(guī)則從旁邊移除，那么主元素中的大部分內容都會消失，并且也不會滾動。

怎么才能做到只有主元素滾動？

該解決方案將被設置為擱置{最小高度: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; /*