Html 嵌套网格中的溢出滚动中断

我有两个CSS网格。一个接一个。我不希望整个页面滚动，只希望嵌套网格的网格区域的内容滚动。此嵌套网格应填充所有可用空间。但是

overflow:scroll

在此嵌套网格中不起作用

正如您在下面的简化示例中所看到的，带有类

.aside

的div工作正常，而带有

.bottomleft

的div根本不滚动

div的高度开始随着

.main container

-div而中断，但我不知道为什么

真正让我困惑的是为什么在

.aside

-div中一切都很好。我在这里看到的唯一区别是它不在嵌套网格中

当然，如果为

.bottom left

-div或

.main container

-grid的第二行指定了一个固定的高度，那么一切都会完美工作，但目标是使其可变

我还尝试向其他父div添加各种

max heights

和

heights

，但到目前为止没有成功

谢谢大家!

html，
身体{
身高：100%；
溢出：隐藏；
}
#根{
身高：100%；
}
.集装箱{
显示：网格；
网格模板柱：1fr 3fr；
网格模板行：自动；
网格模板区域：“主导航旁边的导航”；
身高：100%；
}
.标题{
网格区域：导航；
背景颜色：浅蓝色；
}
梅因先生{
网格区域：主；
背景颜色：浅粉色；
身高：100%；
}
.旁白{
网格区域：侧边；
溢出y：滚动；
}
.主货柜{
显示：网格；
网格模板柱：1fr 3fr；
网格模板行：自动；
网格模板区域：“上左上右”“下左下右”；
身高：100%；
}
左上角{
网格区域：左上角；
}
托普赖特先生{
网格区域：右上角；
}
.左下角{
网格区域：左下角；
溢出y：滚动；
身高：100%；
}
.右下角{
网格区域：右下角；
}

标题
左上角
右上角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
最后的
右下角
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
最后的

您说得对，滚动功能在一个元素（

.aside

）上工作，而在另一个元素（

.bottomleft

）上工作似乎没有任何理由。似乎没有任何实质性差异。一个元素是嵌套的网格容器。但这不重要

然而，如果你看大图，两个滚动条都不应该工作

溢出

属性通常需要固定长度才能生成滚动条。如果没有这样的限制，元素只会扩展以容纳内容，不可能出现溢出

代码就是这样：两个溢出元素都设置为

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%;
}

标题
左上角
右上角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
左下角
最后的
右下角
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
在一边
最后的

哦，我不知道这些干预措施。这可以解释这种行为。你的解决方案还是很灵活的，所以我同意，谢谢！