会。滚动条在content-box下从内容区“抠”走宽度，box-sizing: border-box不包含滚动条；推荐用scrollbar-gutter: stable both，或嵌套容器、伪元素占位、强制显示滚动条等方案应对。
滚动条会吃掉 width 吗？
会。在默认 content-box 盒模型下，当元素出现滚动条（比如设置了 overflow: auto），滚动条的宽度（通常约 16px）**不是额外加在容器外侧的，而是从内容区域里硬生生“抠”走的**。也就是说：
你设了 width: 300px，但实际可用内容宽度 ≈ 284px（减去滚动条宽度），而整个容器的 offsetWidth 仍是 300px —— 滚动条就挤在 padding 和 border 之间，不增加总宽，但压缩内容。
为什么 box-sizing: border-box 不能完全解决？
box-sizing: border-box 确实把 padding 和 border 包进了 width，但它**不包含滚动条**。这是 CSS 规范明确区分的：滚动条属于“渲染层装饰”，不属于盒模型的任何一部分（content/padding/border/margin 都不负责它）。所以即使写了：
.container {
width: 300px;
box-sizing: border-box;
overflow: auto;
}—— 滚动条出现时，内容区依然被压缩，旁边兄弟元素仍可能被顶开（尤其在 flex 或 inline-block 布局中）。
真正稳住宽度的四种方法
核心思路只有两个：要么提前预留空间，要么让滚动条不“抢地盘”。
立即学习“前端免费学习笔记（深入）”；
-
用
scrollbar-gutter（推荐，现代方案）：
加一行scrollbar-gutter: stable both;，浏览器就会始终为滚动条留出空间，无论是否显示。Chrome 117+、Firefox 119+、Safari 17.4+ 已支持。 -
嵌套容器法（兼容性最强）：
外层定宽 +overflow: hidden，内层设overflow: auto并用负 margin 或 calc 补回滚动条宽度（如width: calc(100% + 16px)）。 -
伪元素占位（适合固定宽度场景）：
用::before在右上角盖一个透明 16px 宽的块，pointer-events: none不挡交互。 -
强制显示滚动条（简单粗暴）：
overflow-y: scroll让滚动条永远存在，宽度恒定。缺点是 UI 上多一根“空杆”，部分用户会觉得奇怪。
容易被忽略的坑
滚动条宽度不是固定 16px：Windows 默认约 17px，macOS（无滚动条时隐藏）在 hover 才出现，且宽度可变；Linux 下还可能更窄。所以别写死 16px，改用 scrollbar-gutter 或 JS 动态读取 clientWidth - offsetWidth 差值。另外，resize: both 的容器一旦被拖大，也可能突然触发滚动条，导致二次重排 —— 这类交互场景务必提前测试。
