添加padding-top后出现意外水平溢出，为何Y轴内边距影响X轴宽度？

你遇到的水平溢出，核心冲突出在100vw和垂直滚动条的交互上：

• 给.body添加padding-top:20vh后，.body内部的可用高度变为100vh - 20vh，而.content的高度是1000px，很容易超过这个可用高度，浏览器因此自动出现垂直滚动条。
• 100vw代表的是整个视口的宽度，包含垂直滚动条所占的空间。但浏览器的垂直滚动条是占用页面内容区域宽度的，页面实际可用的水平宽度是「视口宽度 - 滚动条宽度」。
• 你给.body设置width:100vw，等于强制它的宽度撑满整个视口（包含滚动条），但页面实际可用宽度比这个值小，自然就出现了水平溢出。
• Y轴内边距之所以触发这个问题，是因为没有padding-top时，.body高度刚好是100vh，.content可能不会超出视口高度，不会出现垂直滚动条，也就不会有宽度冲突；加了padding-top后，垂直滚动条出现，才暴露了100vw的宽度问题。

不用overflow-x:hidden这种治标不治本的方法，直接调整.body的宽度设置：

• 删掉width:100vw，块级元素默认宽度就是100%，会自动适配父元素（body）的可用宽度，自动避开滚动条占用的空间。
• 也可以明确设置width:100%，效果和默认一致，但更直观。

修改后的核心CSS代码：

.body {
  /* width: 100vw; 移除这一行 */
  width: 100%; /* 可选，添加后效果更明确 */
  height: 100vh;
  background-color: black;
  padding-top: 20vh;
}

这样既保留了padding-top的布局效果，又彻底解决了水平溢出问题，完全符合规范。

内容的提问来源于stack exchange，提问作者John LeRouge