父容器高度塌陷为0是因绝对定位元素脱离文档流所致；必须设置height/min-height或触发重排才能使overflow生效，position:relative仅改变定位基准，不解决高度问题。
父容器高度塌陷为 0，overflow 根本不生效——这不是 bug，是绝对定位脱离文档流的必然结果。
父容器没高度，overflow: auto 就是摆设
绝对定位元素（position: absolute）不参与父容器尺寸计算。如果父容器只包含它一个子元素，又没设 height、min-height 或其他撑高手段，其 computed height 就是 0px。
- 浏览器不会给高度为
0的容器生成滚动条，无论你写多少遍overflow: auto - 用 DevTools 检查父容器的
Computed → height，如果是0px，就坐实了这个问题 -
min-height比height更实用：内容少时保最小可视区，内容多时自动扩展 - 若高度靠 JS 动态渲染（如异步列表），必须在数据插入后手动触发重排，或显式设置
height/min-height
position: relative 是滚动前提，但不是万能解药
很多人以为只要父容器加了 position: relative，里面的 absolute 元素就会“随滚”。其实它只是把定位基准换到了这个父容器，自身仍锚定不动——滚动的是父容器的内容区，absolute 元素跟着整个 containing block 一起位移。
- 漏写
position: relative→absolute子元素锚定到，一滚动就“飞走” - 父容器用了
position: sticky但没配top→ 定位上下文不稳定，absolute行为异常 - 父容器有
transform（如scale(0.95)）→ 创建新 containing block，可能干扰滚动或触发 Safari 渲染 bug
横向滚动条莫名出现？别只盯着 overflow-x: hidden
单纯给父容器加 overflow-x: hidden 很大概率无效，甚至让元素直接消失——因为父容器高度还是 0，根本没裁剪上下文。
- 必须同步设置明确高度：
height: 100vh、min-height: 100vh（注意单独min-height不够），或用flex: 1让它在 Flex 容器中占满剩余空间 - 确保父容器已触发 BFC：
overflow: hidden（非仅 x 方向）或display: flex，避免浮动等干扰裁剪 - 检查
left/right是否冲突：比如left: 0; right: -20px会让浏览器反推宽度超出视口，应改用transform: translateX(20px) - Safari 对
right偏移更敏感，同一段 CSS 在 Chrome 正常，在 Safari 却可能触发scrollWidth > innerWidth
真正卡住人的，往往不是要不要加 overflow，而是忘了确认父容器有没有真实高度——它看不见，但决定一切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
