overflow: hidden 直接裁剪内容且不显示滚动条，适用于装饰性溢出；overflow: auto 仅在溢出时显示滚动条，overflow: scroll 始终强制显示；Flex/Grid 中需配合 min-width: 0 等防止容器被拉伸导致 overflow 失效。
overflow: hidden 会裁剪内容但不触发滚动条
当容器尺寸固定且子元素超出时，overflow: hidden 是最直接的“视觉截断”方案。它不会产生滚动条，也不会改变文档流，但容易造成信息丢失——尤其对可访问性（如屏幕阅读器）和键盘导航不友好。
常见误用场景：div 包裹一段长文本或浮动列表后突然内容消失，却没检查是否意外遮挡了交互区域（比如按钮、下拉箭头）。
- 适用于纯装饰性溢出，例如卡片阴影裁切、图片圆角遮罩
- 慎用于含链接、表单控件或动态内容的容器
- 配合
text-overflow: ellipsis使用时，必须同时设置white-space: nowrap和width（或max-width）
overflow: auto 和 overflow: scroll 的行为差异
overflow: auto 只在内容实际溢出时才显示滚动条；overflow: scroll 无论是否溢出，都会强制渲染滚动条（通常为两个：横向 + 纵向）。这个区别在 macOS 上更明显——系统默认隐藏滚动条，但 scroll 仍会保留占位空间，可能引发布局偏移。
真实问题案例：表格容器设了 overflow: scroll，结果在 Chrome 中右侧多出空白条，导致列宽计算异常。
立即学习“前端免费学习笔记（深入）”；
- 优先用
auto，除非需要滚动条常驻以提示用户“可滚动” - 若只需纵向滚动，写成
overflow-y: auto; overflow-x: hidden，避免横向滚动干扰 - 移动端注意：iOS Safari 对
overflow: auto在position: fixed容器中支持不稳定，建议改用touch-action: pan-y配合
flex 或 grid 容器中 overflow 失效的常见原因
Flex 项目默认会伸缩（flex-shrink: 1），Grid 项默认不换行（grid-auto-flow: row），这些特性会让 overflow 看似“不起作用”。典型表现是：明明写了 overflow: hidden，文字还是撑开容器。
根本原因是：溢出前，父容器已被子元素拉伸变大，子元素根本没“溢出”的机会。
- Flex 容器中，给子项加
flex-shrink: 0或min-width: 0（解决文本不折行问题） - Grid 容器中，对需限制宽度的子项设置
min-width: 0，或对网格轨道使用grid-template-columns: minmax(0, 1fr) ... - 检查是否遗漏了
box-sizing: border-box，padding/border 加上 width 后实际宽度超限
滚动条样式自定义与兼容性取舍
CSS 原生滚动条样式（::-webkit-scrollbar）仅在 Chromium/WebKit 内核生效，Firefox 和 Safari（非 WebKit 滚动条模式）不支持。强行统一外观往往得不偿失。
更务实的做法是接受系统默认滚动条，只做最小干预：比如减小宽度、调浅颜色，或用 scrollbar-width: thin（Firefox）+ scrollbar-color（Firefox）组合。
- 不要依赖
::-webkit-scrollbar实现核心功能（如滚动条拖拽反馈） - 若必须高度定制，用 JS 库（如
simplebar）替代，但要注意增加 bundle 体积和 focus 管理复杂度 - 测试时务必在 Windows（显示双滚动条）、macOS（隐藏式）、iPad（触控惯性）三端验证滚动行为
真正棘手的从来不是选哪个 overflow 值，而是判断“该不该让内容溢出”——有时候加个 word-break: break-word 或重构为响应式网格，比硬套 hidden 更治本。
