我有两个CSS网格。一个在另一个中。我不希望整个页面滚动，而只希望嵌套网格的网格区域的内容滚动。此嵌套网格应填充所有可用空间。但是overflow:scroll在此嵌套网格中不起作用。
正如您在下面的简化示例中所看到的，带有类.aside的div 工作正常，而带有.bottomleft的div 根本不滚动。
div 高度开始随着.main-container-div 而中断，但我不知道为什么。
真正让我感到困惑的是为什么在.aside-div 中一切正常。我在这里可以看到的唯一区别是它不在嵌套网格中。
当然，如果.bottom-left-div 或.main-container- 网格的第二行被赋予固定的高度，一切都可以完美运行，但目标是使其可变。
我还尝试将各种max-heights和heights添加到其他父div，但到目前为止还没有成功。
谢谢！
https://jsfiddle.net/vs6c4gq9/3/
html,
body {
height: 100%;
overflow: hidden;
}
#root {
height: 100%;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto;
grid-template-areas: 'nav nav ' 'aside main';
height: 100%;
}
.header {
grid-area: nav;
background-color: lightblue;
}
.main {
grid-area: main;
background-color: lightpink;
height: 100%;
}
.aside {
grid-area: aside;
overflow-y: scroll;
}
.main-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto;
grid-template-areas: 'topleft topright' 'bottomleft bottomright';
height: 100%;
}
.topleft {
grid-area: topleft;
}
.topright {
grid-area: topright;
}
.bottomleft {
grid-area: bottomleft;
overflow-y: scroll;
height: 100%;
}
.bottomright {
grid-area: bottomright;
}<div id="root">
<div class="container">
<div class="header">
header
</div>
<div class="main">
<div class="main-container">
<div class="topleft">
topleft
</div>
<div class="topright">
topright
</div>
<div class="bottomleft">
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>last</div>
</div>
<div class="bottomright">
bottomright
</div>
</div>
</div>
<div class="aside">
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>last</div>
</div>
</div>
</div>你是对的，因为似乎没有任何理由为什么滚动函数适用于一个元素(.aside)，而不适用于另一个元素(.bottomleft)。似乎没有任何实质性差异。一个元素是嵌套网格容器。但这并不重要。
但是，如果您从大局来看，这两个滚动条都不应该起作用。
overflow属性通常需要固定长度才能生成滚动条。如果没有这样的限制，元素只是扩展以容纳内容，并且不可能溢出。
代码中就是这种情况：两个溢出元素都设置为height: auto。
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto; <-- second row (where 'aside' is placed) is
set to content-based height
grid-template-areas: 'nav nav ' 'aside main';
height: 100%;
}
.main-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto; <-- second row (where 'bottomright' is placed) is
also set to content-based height
grid-template-areas: 'topleft topright' 'bottomleft bottomright';
height: 100%;
}
现在参考此规则，如 MDN 中所述：
为了使
overflow生效，块级容器必须具有设置的高度(height或max-height)或设置为nowrapwhite-space。
因此，在这两种情况下，代码中的滚动函数都应该失败。一个人在至少一个浏览器中工作的事实表明存在异常或干预。无论哪种情况，我都认为它是不可靠的。
考虑一个权衡：牺牲一些灵活性来换取更多的稳定性和安全性。下面是代码的修改版本：
修订小提琴
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 25px calc(100vh - 25px); /* adjustment */
grid-template-areas: 'nav nav ' 'aside main';
height: 100vh;
}
.header {
grid-area: nav;
background-color: lightblue;
}
.main {
grid-area: main;
background-color: lightpink;
}
.aside {
grid-area: aside;
overflow-y: scroll;
}
.main-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 25px calc(100vh - 50px); /* adjustment */
grid-template-areas: 'topleft topright' 'bottomleft bottomright';
}
.topleft {
grid-area: topleft;
}
.topright {
grid-area: topright;
}
.bottomleft {
grid-area: bottomleft;
overflow-y: scroll;
}
.bottomright {
grid-area: bottomright;
}
body {
margin: 0; /* remove default margins */
}<div id="root">
<div class="container">
<div class="header">
header
</div>
<div class="main">
<div class="main-container">
<div class="topleft">
topleft
</div>
<div class="topright">
topright
</div>
<div class="bottomleft">
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>bottomleft</div>
<div>last</div>
</div>
<div class="bottomright">
bottomright
</div>
</div>
</div>
<div class="aside">
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>aside</div>
<div>last</div>
</div>
</div>
</div>