添加padding后overflow-y: scroll滚动容器导致页面出现额外滚动条问题求助

问题根源 #

• 盒模型计算规则问题：box-sizing: border-box 只会把 padding 和 border 纳入元素自身设定的宽高计算范围内，margin 属于元素外间距，是额外叠加的尺寸，不会被包含在内。
• 你的 section 设置了 margin: 2%，CSS 中百分比形式的 margin 无论上下还是左右方向，都是相对于父元素的宽度计算的，不会参考高度：
  1. 横向尺寸：section 默认宽度 100%，加左右各 2% 的 margin 后总宽度变成 104%，超出父容器 .store 的宽度，触发横向滚动条。
  2. 纵向尺寸：每个 section 设置了 height: 25%，叠加上下 margin 的高度后，单块 section 总高度已经超过 25%，8个 section 的总高度自然会超出 .store 的容器高度，同时也会撑高整个页面，触发页面全局的纵向滚动条。
• 额外触发点：你给 html 设置了 width: 100vw，100vw 的计算包含浏览器滚动条的宽度，当页面出现纵向滚动条时，100vw 会比实际可用视口宽度更宽，进一步加重横向滚动问题。

解决方案 #

1. 修正 html 的宽度设置：把 html 的 width: 100vw 改为 width: 100%，避免滚动条宽度导致的尺寸溢出。
2. 调整 section 的宽度计算：给 .store > section 添加 width: calc(100% - 4%);，扣掉左右各 2% 的 margin，保证横向总宽度刚好适配父容器。
3. 调整 section 的高度计算：如果需要固定一屏展示4个 section，把高度改为 height: calc(25% - 4%);，扣掉上下各2%的 margin，避免纵向尺寸溢出；如果不想用百分比 margin，也可以把 margin 改为固定值，比如 margin: 10px 2%;，高度对应改为 height: calc(25% - 20px); 即可，计算逻辑一致。
4. 可选优化：给 .store 添加 overflow-x: hidden;，作为横向溢出的兜底防护。

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