overflow: auto是最稳妥的选择，仅内容真实溢出时显示滚动条；overflow: scroll强制显示滚动条并占位，易导致布局偏移；overflow: hidden则彻底裁剪且不可滚动。
overflow 属性决定滚动条“要不要出现”
滚动条是否显示，不取决于你写了多少 CSS，而取决于 overflow 值 + 内容是否真的溢出容器。常见误区是以为设了 overflow: auto 就万事大吉，其实它只在内容宽高超过容器设定值时才触发。
-
overflow: auto：最安全的选择，内容不溢出时无滚动条，不占位也不干扰布局 -
overflow: scroll：强制显示滚动条（即使没内容），Windows 下会固定占约 16px 宽度，可能挤压内容或导致换行 -
overflow: hidden：彻底裁剪，既不可见也不可滚动——不是“隐藏滚动条”，而是“干掉滚动能力” - 单独控制方向更稳妥：
overflow-x: auto+overflow-y: hidden，避免默认auto在两个方向都判断带来的意外滚动
特别注意：容器必须有明确的尺寸约束（如 max-width、height 或 max-height），否则内容会把容器撑开，永远不溢出。
滚动条样式只能用伪元素覆盖，且仅限 WebKit
Firefox 支持 scrollbar-width: none 和 scrollbar-color，但 Chrome、Edge、Safari 只认 ::-webkit-scrollbar 系列伪元素。想“视觉隐藏但保留滚动”，不能靠 JS，只能靠这两套规则同时写。
- WebKit 浏览器要清空滚动条：
.container::-webkit-scrollbar { width: 0; }.container::-webkit-scrollbar-track { background: transparent; }.container::-webkit-scrollbar-thumb { background: transparent; } - Firefox 要同步加：
scrollbar-width: none;（放在同一选择器里） - 别漏掉
overflow-y: scroll或auto——伪元素只是改样式，不提供滚动能力 - 自定义颜色时，
::-webkit-scrollbar-thumb的border-radius建议设为8px以上，否则 iOS Safari 拖拽手感差
表格加滚动条必须绕过 <table> 自身的 overflow 限制<p>直接给 <code><table> 设 <code>overflow-x: auto 无效，因为表格是替换元素，浏览器会忽略其 overflow 声明，优先按内容撑宽。滚动行为必须由外层块级容器接管。- 外层
<div> 必须设：<code>overflow-x: auto、display: block、width: 100%（或 max-width） <table> 本身要加：<code>display: block + min-width: max-content，否则宽度计算仍走表格算法，无法触发溢出- 防文字折行干扰宽度：
white-space: nowrap 加在外层 <div> 或 <code><th>/</th>
<td> 上<li>iOS Safari 必加：<code>-webkit-overflow-scrolling: touch，否则拖拽卡顿甚至无响应
- 如果父容器是 flex 布局（比如 Bootstrap 的
.row），外层 <div> 还得加 <code>flex-shrink: 0，否则会被压缩到失去滚动前提滚动条实际占用空间，这点常被忽略
滚动条不是浮在内容上的图层，它会真实挤占容器内部可用宽度/高度。比如容器设了 width: 300px，滚动条出现后，内容区只剩约 284px（Windows 默认 16px），可能导致文字换行、图片缩放或布局错位。
- 解决方案之一是用
max-width: calc(100% - 16px) 预留空间，但需配合 JS 检测滚动条宽度才可靠
- 更实用的做法：用
overflow: overlay（已废弃，仅旧版 WebKit 支持），或接受它占位，改用 padding-right: 16px 补齐视觉平衡
- 移动端尤其要注意：iOS Safari 的滚动条宽度不固定，且
getBoundingClientRect() 获取不到，硬编码 16px 在 iPad 上可能不准
- 真正难处理的是嵌套滚动场景——比如弹窗里有横向表格，外层又用了
overflow-y: auto，此时两个滚动条叠加，空间冲突更明显
<div> 必须设：<code>overflow-x: auto、display: block、width: 100%（或 max-width）<table> 本身要加：<code>display: block + min-width: max-content，否则宽度计算仍走表格算法，无法触发溢出white-space: nowrap 加在外层 <div> 或 <code><th>/</th>
<td> 上<li>iOS Safari 必加：<code>-webkit-overflow-scrolling: touch，否则拖拽卡顿甚至无响应.row），外层 <div> 还得加 <code>flex-shrink: 0，否则会被压缩到失去滚动前提滚动条实际占用空间，这点常被忽略
滚动条不是浮在内容上的图层，它会真实挤占容器内部可用宽度/高度。比如容器设了 width: 300px，滚动条出现后，内容区只剩约 284px（Windows 默认 16px），可能导致文字换行、图片缩放或布局错位。
- 解决方案之一是用
max-width: calc(100% - 16px)预留空间，但需配合 JS 检测滚动条宽度才可靠 - 更实用的做法：用
overflow: overlay（已废弃，仅旧版 WebKit 支持），或接受它占位，改用padding-right: 16px补齐视觉平衡 - 移动端尤其要注意：iOS Safari 的滚动条宽度不固定，且
getBoundingClientRect()获取不到，硬编码 16px 在 iPad 上可能不准 - 真正难处理的是嵌套滚动场景——比如弹窗里有横向表格，外层又用了
overflow-y: auto，此时两个滚动条叠加，空间冲突更明显
