Html Firefox和Chrome中的CSS网格流行为不同

我注意到Firefox和Chrome在下面的截图中有不同的滚动行为。在Firefox中，只有

.main

滚动，在Chrome中，整个身体滚动。我在做一些不符合规范的事情吗？哪个浏览器是对的？如何让Chrome表现得像Firefox

正文{
高度：100vh；
}
.集装箱{
显示：网格；
网格模板：50px 1fr/240px 1fr；
身高：100%；
}
.标题{
网格面积：1/1；
}
.侧边栏{
网格面积：2/1；
}
.main{
网格面积：2/2；
身高：100%；
溢出：自动；
}
.大分区{
高度：800px；
}

一些标题行
边栏
这个很大
还有更多

从

.main

中删除

高度：100%

，应该可以。您已经定义了

.main

列（1fr）的高度大小

CSS

.main {  
grid-area: 2/2;    
overflow: auto;
}