CSS网格-固定高度滚动容器防止内部背景占据整个高度

我有一个固定高度的滚动div，里面有一个滚动条、一个标题和一些内容。我希望侧边栏占据固定高度容器的全部高度，但是背景仅限于滚动高度并被切断

包装器无法设置为滚动

在下面的代码段中，可以通过滚动容器看到这一点

.wrapper{
高度：200px；
}
.集装箱{
显示：网格；
网格模板区域：“边栏标题”“边栏主”；
网格模板行：最小内容1fr；
网格模板列：最小内容1fr；
弯曲方向：立柱；
身高：100%；
溢出x：隐藏；
溢出y：滚动；
}
.侧边栏{
网格区域：侧栏；
背景：红色；
}
.标题{
网格区域：标题；
背景：蓝色
}
梅因先生{
网格区域：主；
背景：绿色；
}

边栏


项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

标题

主要

将高度替换为最小高度，并将滚动应用于包装器：

.wrapper{
高度：200px；
溢出y：滚动；
}
.集装箱{
显示：网格；
网格模板区域：“边栏标题”“边栏主”；
网格模板行：最小内容1fr；
网格模板列：最小内容1fr；
弯曲方向：立柱；
最小高度：100%；
}
.侧边栏{
网格区域：侧栏；
背景：红色；
}
.标题{
网格区域：标题；
背景：蓝色
}
梅因先生{
网格区域：主；
背景：绿色；
}

边栏


项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

标题

主要

我试着简单地删除

高度：100%我想它似乎符合您的要求。是否将滚动条移到包装器？更合乎逻辑的是，删除高度会强制整个页面滚动，在这种情况下，包装器不能设置为滚动。在这种情况下，包装器必须是带有内部滚动的固定区域。在这种情况下，包装器不能设置为滚动（添加到问题中），将高度设置为最小高度，然后溢出容器的高度。