overflow:hidden在flex子项上失效，根本原因是子项默认min-width:auto（主轴row时）或min-height:auto（主轴column时），锁定最小尺寸不小于内容自然宽/高，导致“溢出”未发生；必须对flex直接子项设min-width:0或min-height:0，并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis及明确宽度约束才生效。
overflow: hidden 在 flex 容器里为什么失效
不是 overflow 写错了，而是 flex 布局下子项默认不触发溢出裁剪——除非显式设了 min-width: 0 或 min-height: 0。flex 项的最小尺寸默认是内容宽度（min-width: auto），导致即使父容器设了 overflow: hidden，子项仍会撑开容器。
常见场景：div 用 display: flex 包裹一个长文本 span，文本跑出边界却没被裁掉。
- 修复方式：给子项加
min-width: 0（水平流）或min-height: 0（垂直流） - 若子项是
img或video，还需确认是否设置了max-width: 100%，否则缩放逻辑会绕过 overflow - 避免对 flex 容器本身设
overflow: hidden后再用align-items: center—— 垂直居中可能把内容挤出裁剪区
grid 布局中 overflow: hidden 的生效前提
grid 容器设 overflow: hidden 只对“网格轨道外”的内容有效；如果内容在轨道内（比如一个 grid cell 里放了超宽 div），裁剪取决于该 cell 内部的样式，而非容器。
典型翻车点：用 grid-template-columns: 1fr 定义单列，cell 里塞了无换行的长字符串，结果文字溢出但没被裁。
- 必须在 grid cell 内部元素上单独设
overflow: hidden+white-space: nowrap+text-overflow: ellipsis - grid 容器的
overflow对place-items: center没约束力——居中偏移量超出轨道时，仍会被裁 - 注意
grid-auto-flow: column下的自动列，overflow 只作用于行方向，列方向溢出需额外控制
position: absolute 元素能否被父级 overflow: hidden 裁剪
能，但前提是父元素不是 static 定位且已建立新的包含块（containing block）。static 父级无法截断绝对定位子项，无论是否设了 overflow: hidden。
错误写法：<div style="overflow: hidden"><div style="position: absolute">xxx</div></div> —— 这里子项脱离的是初始包含块（viewport），父级完全管不住。
- 修复关键：给父级加
position: relative、absolute或fixed - 若父级用了
transform（哪怕只是transform: translateZ(0)），也会创建新包含块，此时overflow: hidden生效 - 慎用
will-change: transform—— 它可能意外触发包含块，导致裁剪行为突变
移动端 overflow: hidden 失效的底层原因
不是 CSS 写错，而是 iOS Safari 和部分安卓 WebView 对 overflow: hidden 的实现依赖于“滚动容器”语义：如果父容器没被识别为可滚动上下文（scroller），该声明会被忽略。
现象：页面 设了 overflow: hidden，但手指一划，页面还是能拖动。
- 根本解法：给目标容器加
-webkit-overflow-scrolling: touch（iOS）+touch-action: none（安卓） - 更稳妥做法：用
body { overscroll-behavior: none }配合height: 100vh限制视口高度 - 注意：Chrome for Android 9+ 已支持
overscroll-behavior，但旧版 WebView 仍需降级 fallback
真正麻烦的从来不是“要不要加 overflow: hidden”，而是它在哪种布局模型下、被谁的定位/尺寸/包含块规则悄悄绕过了。每次失效，几乎都对应着一个被忽略的渲染上下文切换点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
