overflow-gutter: stable 是解决滚动条挤占宽度导致布局错位的唯一标准方案，需配合 overflow: auto/scroll 使用，仅 Chromium 120+ 原生支持，老浏览器需用 @supports 降级并辅以 padding 补偿。
滚动条挤占容器宽度导致布局错位
滚动条默认会侵占容器的 width，比如设了 width: 300px 的 div，出现垂直滚动条后，实际内容区可能只剩 284px（取决于系统滚动条宽度），Flex/Grid 项被压缩、文字换行异常、边框对不齐——这不是 bug，是盒模型的自然表现，但容易误判为 CSS 写错了。
- Windows 默认滚动条约 17px 宽，macOS 隐藏式滚动条在悬停前不占空间，但一旦触发就“突兀挤入”，更难调试
- 用
overflow: overlay曾是旧方案，但已被 Chrome/Firefox 废弃，现在无效 - 不要靠 JS 测量
offsetWidth - clientWidth来动态补偿，既不准又触发重排
用 overflow-gutter 预留滚动条位置
overflow-gutter 是目前唯一标准方案，它让浏览器在计算盒模型时，把滚动条“当作已存在”来预留空间，无论滚动条是否实际显示，容器宽度都稳定。
- 必须和
overflow搭配使用，单独写overflow-gutter无效 - 只对
overflow: auto或overflow: scroll生效；overflow: hidden或visible下会被忽略 - 支持值只有两个：
stable（推荐）和auto（行为未完全统一，慎用） - 示例：
div { overflow: auto; overflow-gutter: stable; }
兼容性与降级处理
目前仅 Chromium 120+（Edge 120+/Chrome 120+）原生支持 overflow-gutter，Firefox 和 Safari 尚未实现。不能指望它“开箱即用”。
- 用
@supports (overflow-gutter: stable)包裹新写法，老浏览器自动跳过 - 降级方案仍需保留：对关键容器加
padding-right: 17px并用box-sizing: border-box，再配合overflow: overlay（虽废弃但部分旧版仍认）作兜底 - 注意：Safari 对
scrollbar-gutter（旧名）有实验性支持，但已移除，别混淆
为什么不用 scrollbar-width 或伪元素模拟
scrollbar-width（Firefox）和 ::-webkit-scrollbar 只能改样式，无法解决“宽度被占用”这个根本问题；用伪元素画个假滚动条更危险——它不参与滚动逻辑，用户拖不动，还可能遮挡真实内容。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width: none会直接隐藏滚动条，但滚动功能还在，用户不知道能滚，体验断裂 - 所有基于
padding+ JS 动态判断的方案，在 iframe、缩放、多语言文本宽度变化等场景下极易失效 -
overflow-gutter是唯一从渲染管线底层解决问题的方式，其他都是绕路
滚动条宽度不是设计变量，而是渲染环境的一部分；靠猜、靠测、靠 hack 容易在不同设备或系统设置下突然崩掉。真正稳住布局，得让浏览器自己承认“这儿该留个坑”。
