scrollbar-gutter: stable 是解决滚动条挤占内容区宽度的唯一原生方案，需搭配 overflow: auto 使用，chrome 94+、firefox 97+、safari 16.4+ 支持；旧浏览器可用 env(scrollbar-width) 降级。
设置 overflow: scroll 后盒模型尺寸“变”了，不是 CSS 解析错了，而是滚动条真实占用了内容区空间——它被算进 width 和 height 里了，且这个占用不可忽略（通常 12–17px），尤其在固定宽高的容器中会直接导致内容被压缩、文字换行、子元素错位。
为什么 overflow: scroll 会让内容区变窄？
浏览器默认使用 content-box 盒模型：你写的 width: 300px 指的是「内容宽度」，不包含 padding、border，更不预留滚动条空间。一旦启用 overflow: scroll，垂直滚动条就从这 300px 里硬生生“抠”走约 15px，实际可用内容宽度只剩 ~285px。
- 这个行为在所有主流浏览器一致，但滚动条宽度因系统而异：Windows 常为 17px，macOS（无常驻滚动条）可能为 0 或动态出现，Linux 可能是 12px
-
overflow: auto在未溢出时不显示滚动条，所以“变窄”只发生在内容真正溢出那一刻，造成布局抖动 - 即使设了
box-sizing: border-box，它只把 padding 和 border 算进 width，依然不管滚动条
怎么让滚动条不挤占内容区？
现代方案优先用 scrollbar-gutter，它是唯一原生支持“预留空间”的 CSS 属性，无需 JS 估算、不依赖系统假设：
- 给容器加
scrollbar-gutter: stable both;，浏览器会自动在右侧（或底部）留出滚动条所需空间，且该空间不参与布局计算，内容区宽度保持恒定 - 搭配
overflow: auto使用最自然：overflow: auto; scrollbar-gutter: stable both; - 注意兼容性：
scrollbar-gutter在 Chrome 94+、Firefox 97+、Safari 16.4+ 支持；旧版需降级 fallback
旧浏览器 fallback 怎么写才稳？
当 scrollbar-gutter 不可用时，手动预留是最可控的方式，但不能写死 17px：
- 用
env(scrollbar-width)是最佳 fallback：padding-right: env(scrollbar-width, 0px);—— 浏览器会自动注入当前系统滚动条宽度，CSS 原生支持，无需 JS - 如果连
env()都不支持（如 IE 或老 Safari），再退到 JS 检测：document.documentElement.offsetWidth - document.documentElement.clientWidth得到滚动条宽度，然后动态加padding-right - 避免用
html { overflow-y: scroll; }强制全局滚动条——它解决的是页面级横向跳动，对局部容器无效，还可能触发不必要的重排
自定义滚动条时为什么内容还是被挤？
很多人以为用 ::-webkit-scrollbar 隐藏了滚动条，内容区就“解放”了——其实不是。隐藏只是让视觉消失，滚动条的占位空间仍在，除非同时用 scrollbar-gutter: stable 或显式移除占位逻辑。
-
::-webkit-scrollbar { width: 0; }或display: none不影响布局占用，只是看不见了 - 真正释放空间要靠
scrollbar-gutter: stable+overflow: auto，或改用overflow: hidden并自行实现 JS 滚动（代价高，慎选） - Firefox 的
scrollbar-width: none是少数能真正移除占位的属性，但仅限 Firefox，且不支持scrollbar-color以外的样式控制
滚动条对盒模型的影响本质是「空间归属问题」：它既不属于 content，也不属于 padding 或 border，却真实占据 layout flow。现代 CSS 已给出明确解法，关键是别再把它当成纯样式问题去 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
