问题原因：
当grid布局中配置1fr。如果子元素是多个，会按照分配比例限制子元素宽度，
如果子元素只有一个，或者少于配置的列数
剩余的子元素，会根据元素内容的大小，自动撑开，填补宽度，如果没有超出，则正常显示
.body-box {
width: 100vw;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
修改成百分比，固定宽度就可以了
grid-template-columns: 50% 50%;
