Html 如何防止css网格列超过网格容器的最大高度？

我有一个CSS网格布局，如下所示：

正文{
溢出：隐藏；
填充：0；
保证金：0；
背景色：#2225255；
颜色：白色；
}
#容器{
显示：网格；
网格模板柱：27fr 78fr；
最大高度：100vh；
}
#左{
网格行：1；
网格柱：1；
}
#对{
网格行：1；
网格柱：2；
最大高度：100%；
}
.盒子{
利润率：8px；
填充：8px；
边界半径：10px；
边框：蓝色实心2px；
溢出y：自动；
最大高度：100%；
}

导航边栏的东西在这里
页面内容

问题并不是最大高度的问题。它是

.box

元素的上下页边距（

页边距：8px

）。当添加到

最大高度：100vh

时，会导致错误容器溢出。如果删除这些页边距，并添加

框大小：边框框

（以考虑边框和填充），页面和

溢出

将按预期工作

正文{
保证金：0；
背景色：#2225255；
颜色：白色；
}
#容器{
显示：网格；
网格模板柱：27fr 78fr；
}
#左{
网格行：1；
网格列：1
}
#对{
网格行：1；
网格柱：2；
}
.盒子{
/*利润率：8px*/
填充：8px；
边界半径：10px；
边框：水性固体5px；
最大高度：100vh；
溢出：自动；
}
李{
利润率：10px；
}
*{框大小：边框框；}

导航边栏的东西在这里

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

@jai_uu您可以使用

网格间距：16px在
#容器上
替换
边距