overflow四个基础取值选择结论：visible默认不裁剪不滚动、hidden裁剪无滚动条、scroll强制双轴滚动条、auto仅溢出时显示滚动条；选型取决于是否允许访问截断内容——模态框用auto，文字截断配hidden，scroll多用于调试或规范统一。
overflow 的四个基础取值怎么选
直接说结论：visible 是默认行为，不裁剪、不滚动、内容照常溢出；hidden 会裁掉超出部分且不给滚动条；scroll 强制显示双轴滚动条（哪怕没溢出）；auto 最常用——只在真溢出时才出现滚动条。
选哪个，取决于你是否允许用户访问被截断的内容。比如模态框里放长表单，用 auto；做文字截断提示（配合 text-overflow: ellipsis），就得配 hidden；而 scroll 现在基本只用于调试或强制统一滚动体验（如某些设计系统规范要求）。
为什么 overflow: hidden 不生效
常见现象：写了 overflow: hidden，但内容还是跑出来了。根本原因不是属性写错了，而是容器没“锁住”尺寸：
- 容器没设
height、max-height或width、max-width—— 溢出的前提是存在明确边界，否则元素会自适应撑开 - 父容器用了
display: flex且没设align-items: start或flex-shrink: 0，子项可能被拉伸或压缩，导致 overflow 失效 - 子元素用了
position: absolute，它脱离文档流后，父容器的 overflow 对它无效（除非父容器也设了position: relative）
overflow-x 和 overflow-y 能不能混着用
能，而且很常用。它们优先级高于 overflow 的简写值，比如：
overflow: auto; overflow-x: hidden; → 垂直方向按需滚动，水平方向强制裁剪
overflow: scroll; overflow-y: visible; → 水平滚动条强制出现，垂直方向退化为 visible（注意：此时 visible 在该轴上实际等效于 auto，浏览器会自动降级）
典型场景：
- 固定高度侧边栏：用
overflow-y: auto+overflow-x: hidden - 宽表格容器：
overflow-x: auto，让横向可滑动，纵向保持自然流式 - 弹窗内容区：
overflow-y: auto防止内容顶穿底部按钮
移动端和 Safari 下 overflow:auto 的坑
overflow: auto 在 iOS Safari 和部分安卓 WebView 中，默认不支持「惯性滚动」，手指松开就停，体验生硬。解决方式有限但明确：
加 -webkit-overflow-scrolling: touch（仅 Safari 有效，已废弃但仍是事实标准）
现代更稳妥的做法是用 overscroll-behavior: contain 防止滚动穿透，再配合 scrollbar-width: none（Firefox）和 ::-webkit-scrollbar { display: none; } 隐藏原生滚动条，用 JS 实现自定义滚动——但这属于进阶需求，普通列表/弹窗没必要上。
最容易被忽略的一点：如果容器内有 transform 或 will-change，某些旧版 Chrome 会绕过 overflow 的裁剪逻辑，导致 hidden 失效。遇到这种情况，加 backface-visibility: hidden 通常能修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
