您正在使用box-sizing: border-box;，这使得padding和border被认为包含在width和height属性中。
一般来说，这是一个不错的选择，但重要的是要认识到，与padding和border不同，它不会影响margin。

因此，由于内部元素的宽度为100%加上24 px的边距，它总是太大，导致滚动条出现。

有两件事-浏览器可以把默认的边距，例如：body（在这个例子中是8px，当我看的时候），所以有一个宽度为100%的body（viewport）会导致溢出，因为这个边距太大了。其次，子元素得到了一个24px的边距，它显示在顶部和左侧，但在右侧和底部没有空间。
如果我们不将主体大小限制为100%（100vw），而是将main设置为100vw宽度和100vh高度，看看会发生什么：

html,
body {
  display: flex;
  rheight: 100%;
  rwidth: 100%;
}

main {
  height: 100vh;
  width: 100vw;
  background-color: rgb(0, 0, 0);
  margin: 24px;
}

<!-- body element added automatically -->
<main>Wtf</main>

当你滚动时，你可以看到整个主要部分和它的页边空白都在那里。
如果您希望所有内容都适合视口，但main仍具有24px的边距，则可以计算其宽度和高度，例如calc（100%-（2 * 24px））
一个二个一个一个

这些可能会有所帮助：
1.折叠边距
1.分隔边距
我的经验告诉我：
1.对于单个元素周围的间距**=〉请使用填充符。
1.* * 多个元素之间的间距=〉使用边距。
1.水平居中=〉使用边距。
1.垂直居中=〉position/transform + top/left/right/bottom或flex/align-items
1.用于组织具有共同对齐方式的多个元素=〉flex/align-items
1.对于自对准=〉使用position/transform和top/left/right/bottom