overflow-hidden 仅裁剪正常流或相对定位的子元素，对绝对定位、固定定位或带 transform 的子元素无效；混用方向性类易触发浏览器自动修正；响应式下需配合宽度限制和子元素收缩控制。
overflow-hidden 在 Tailwind 中到底隐藏什么
它只对当前元素的直接子内容生效，不穿透嵌套结构。比如一个 div 加了 overflow-hidden，但它的子元素设置了 position: absolute 或 transform: translateX(100px)，依然可能溢出可见区域——因为脱离文档流后，父级的溢出裁剪边界失效了。
- 只裁剪「正常流内」或「相对定位」的子元素
- 对
position: absolute、position: fixed、带transform的元素，需额外加overflow-hidden到其最近的包含块（通常是父级relative容器） - 如果子元素用了
z-index抬高层级，不影响裁剪逻辑，裁剪发生在绘制阶段，和层叠顺序无关
和 overflow-x/overflow-y 混用时的常见翻车点
单独用 overflow-hidden 是 overflow: hidden，等价于同时设 x 和 y 方向。但一旦混用 overflow-x-auto + overflow-y-hidden，就容易触发浏览器的“自动修正”行为：某些版本 Chrome 会悄悄把 overflow-y 改成 scroll，哪怕你写了 hidden。
- 避免混用方向性类和全向类，例如不要写
overflow-hidden overflow-x-auto - 需要仅横向滚动时，用
overflow-x-auto overflow-y-hidden，但要测试 Safari 和旧版 Edge —— 它们可能忽略overflow-y-hidden - 更稳妥的做法是显式重置：加
overflow-y: hidden在 CSS 中覆盖，或用overflow-x-auto overflow-y-clip（Tailwind v3.3+ 支持overflow-y-clip）
响应式下 overflow-hidden 失效的典型场景
很多人在 md:overflow-hidden 后发现小屏还是溢出，其实是因为媒体查询只控制类是否生效，而溢出行为还依赖父容器尺寸和子内容宽度。比如子元素是 flex 布局且没设 flex-shrink，即使父级加了 overflow-hidden，内容仍会撑宽容器，导致整体换行或横向滚动条出现。
- 检查子元素是否意外设置了
white-space: nowrap或flex-shrink: 0 - 响应式隐藏前，先确保容器有明确宽度限制（如
max-w-full、w-full），否则overflow-hidden无边界可裁 - 移动端慎用
overflow-hidden配合scroll-snap，iOS Safari 可能跳过裁剪直接启用滚动
真正难处理的不是加不加 overflow-hidden，而是得想清楚：你想裁的是视觉溢出，还是交互溢出，抑或是防止内容被误触——这三者对应的 DOM 结构、定位方式和 CSS 层级策略完全不同。
立即学习“前端免费学习笔记（深入）”；
