Html CSS网格滚动问题：右侧填充和边框“；重叠“；内容

我不理解这种行为。是虫子吗？我必须做什么才能使正确的填充和边框位于（橙色）内容之外

更新：我想要滚动。问题在于，右侧的填充和边框并没有被推到右侧，而是与（橙色）内容重叠

试验
*，*：前，*：后{填充：0px；边框：0px；边距：0px；框大小：边框框；}
#网格>分区{边框：20px实心橙色；}
1frauto200px1fr

使用

显示：网格


*，*：之前，*：之后{
填充：0px；
边界：0px；
边际：0px；
框大小：边框框；
}
身体{
宽度：90vw；
高度：90vh；
}
#滚动窗格{
宽度：100%；
身高：100%；
溢出：自动；
边框：20px实心黄色；
显示：网格；/*解决方案*/
对齐项目：拉伸；/*或“开始”，如果不希望内容跟踪滚动窗格的宽度*/
对齐项目：开始；/*或“拉伸”，如果希望内容跟踪滚动窗格的高度*/
}
#网格{
宽度：100%；
显示：网格；
网格模板列：1fr auto 200px 1fr；
填充：20px；
边框：20px实心淡蓝色；
}
#网格>分区{
边框：20px实心橙色；
}

1fr
汽车
200px
1fr
可以通过定位来解决-

将
位置：绝对
和
最小宽度：100%
添加到
网格

将
位置：相对
添加到
#滚动窗格

（当相对于
滚动窗格
定位为
绝对
时，它将从流中取出，溢出行为现在开始。）

请参见下面的演示：


*，
*：之前，
*：之后{
填充：0px；
边界：0px；
边际：0px；
框大小：边框框；
}
身体{
宽度：90vw；
高度：90vh；
}
#滚动窗格{
宽度：100%；
身高：100%；
溢出：自动；
边框：20px实心黄色；
位置：相对；/*已添加*/
}
#网格{
位置：绝对；/*已添加*/
最小宽度：100%；/*已添加*/
/*宽度：100%*/
显示：网格；
网格模板列：1fr auto 200px 1fr；
边框：20px实心淡蓝色；
填充：20px；
}
#网格>分区{
边框：20px实心橙色；
}

1fr
汽车
200px
1fr
即使我使用15%而不是200px（但无论如何，我需要的是恒定宽度，而不是百分比），我也观察到同样的问题。恒定宽度将覆盖父容器，因为父容器是以百分比定义的。所以，您需要在某个地方固定容器的宽度和最小宽度。最小宽度表示容器的宽度不能小于定义的宽度。即使宽度小于最小宽度，最小宽度也会占上风。我更新了问题，问题不在于滚动，我想要那个。右边的填充和边框是“粘住”的，不会被推到右边。是否只想滚动橙色框。您可以将overflow:auto设置为div-id网格，并从div-id滚动窗格中删除overflow:auto。滚动效果很好，就像这样（我希望它用于id为“scrollpane”的黄色div）。看看右边内容的蓝色边框。的确如此！你肯定知道你的CSS！现在有两种解决方案可行。我真的不明白这些职位说明，你想详细说明一下吗？当你定位为
绝对
，它将从流程中删除，并且
溢出
现在会发生行为。。。将
display:grid
添加到
scrollpane
中我想也可以……因为如果没有指定，
绝对
定位将基于
主体
元素。。。。同时，更新的答案我喜欢阿米特的答案，因为它更短，但也更神奇。我喜欢你的，因为它让我更了解这个问题。哦，这些内联样式！您可以将Amit的答案标记为正确：）