overflow: scroll 会强制垂直滚动条永远存在，从内容区“抠”走约15–17px宽度却不增加容器总宽，导致内容压缩、布局错位；这不是bug，是规范行为，需用html { overflow-y: scroll }或scrollbar-gutter: stable主动预留空间。
直接结论：overflow: scroll 会让垂直滚动条永远存在，它从内容区“抠”走宽度（通常 15–17px），但不增加容器总宽——所以内容被压缩、兄弟元素被顶开、Flex/Grid 布局错位。这不是 bug，是规范行为，必须主动预留空间。
为什么 overflow: scroll 会吃掉 width
在 box-sizing: content-box（默认）下，width: 300px 指的是 content 区域宽度；当出现滚动条时，浏览器直接从这块 content 里划出约 16px 给滚动条，padding 和 border 不受影响，但实际可渲染内容只剩 ≈284px。即使写了 box-sizing: border-box，滚动条仍不计入盒模型——它是独立于 content/padding/border/margin 的渲染层装饰。
常见错误现象：overflow-y: scroll 加在 body 上没用、局部容器 hover 出滚动条后文字换行、右侧固定宽度侧边栏突然左移。
- 滚动条宽度不是固定值：Windows 约 17px，macOS 隐藏式滚动条 hover 才出现且宽度可变，Linux 下可能更窄
- 别硬写
calc(100% - 17px)——不同系统、缩放、字体设置下结果不同 -
overflow: overlay已被 Chrome/Firefox 废弃，现在无效
html { overflow-y: scroll } 是最简稳解
根元素 html 的 overflow 控制视口级滚动行为，它的 overflow-y: scroll 会强制垂直滚动条常驻，并让浏览器在布局阶段就把它当“已存在”处理，从而稳定视口宽度分配。加在 body 上无效，因为 body 只是普通块级元素，无法影响视口计算。
立即学习“前端免费学习笔记（深入）”；
- 必须写成
html { overflow-y: scroll }，不能写body { overflow-y: scroll } - 避免同时写
html { overflow: scroll }——这会强制显示水平滚动条，引发新问题 - 某些 CSS 重置库（如 normalize.css）可能重设
html的overflow，必要时加!important兜底 - 若项目用了 UI 库（如 Ant Design），检查其是否注入了全局
html样式
scrollbar-gutter: stable 是现代标准方案
scrollbar-gutter: stable 是目前唯一标准级解法：它让浏览器在盒模型计算时主动为滚动条预留空间，无论滚动条是否实际显示，容器宽度都恒定。但它必须和 overflow: auto 或 overflow: scroll 搭配使用，单独声明无效。
- 写法示例：
div { overflow: auto; scrollbar-gutter: stable; } - 仅 Chromium 120+（Chrome/Edge 120+）、Firefox 119+、Safari 17.4+ 支持，老浏览器需降级
- 用
@supports (scrollbar-gutter: stable)包裹新写法，降级可用padding-right: 17px+box-sizing: border-box - 别混淆旧实验性属性
overflow-gutter（已移除）或scrollbar-width（只改样式，不解决占位）
局部容器怎么稳住宽度
如果只希望某个卡片、弹窗或侧边栏内部滚动时不跳动，不能依赖全局 html 规则，得在容器级隔离滚动行为：
- 外层设
overflow: hidden定宽，内层设overflow-y: auto并用width: calc(100% + 17px)补回滚动条空间（兼容性最好） - 用伪元素占位：
&::before { content: ""; position: absolute; top: 0; right: 0; width: 17px; height: 100%; pointer-events: none; }，适合固定宽度场景 - hover 时才显示滚动条？那就得动态补偿：
.container { width: 100%; } .container:hover .content { width: calc(100% - 17px); }，但需注意 macOS 隐藏滚动条的触发时机不可靠 - 绝对定位子元素或
transform会破坏滚动容器结构，导致overflow失效
真正麻烦的不是写哪一行 CSS，而是滚动条宽度随系统、缩放、语言、甚至用户偏好变化——所有硬编码像素值的方案，在多端交付时都容易漏测。优先用 scrollbar-gutter 或 html { overflow-y: scroll }，再辅以 @supports 和 padding 降级，比 JS 动态测量 clientWidth - offsetWidth 更可靠。
