子元素溢出时父容器能否滚动，核心在于父容器是否形成被约束的滚动区域。如果父容器高度不固定，内容再多也只会把页面撑长；如果父容器设置了 overflow 但子元素通过绝对定位脱离当前布局，滚动区域也可能没有覆盖到子元素。
父容器为什么会不出现滚动条
滚动条出现的条件不是内容超出，而是盒模型被限制且溢出区域被允许滚动。父容器需要有一个确定高度或最大高度，例如 height 或 max-height。没有高度约束时，overflow 即使写成 auto，浏览器也只会让父容器随内容增长，看起来就像滚动没有生效。
overflow 的裁剪和滚动作用在父容器的内容区域。普通流子元素会参与父容器内容尺寸计算，所以长文本或长列表通常能让父容器出现滚动条。绝对定位子元素则不同，它不参与普通流布局，是否影响父容器滚动区域取决于包含块关系和浏览器对滚动溢出区域的计算。
<div class="parent"> <div class="child">很长的内容...</div> </div>
如果父容器只写了固定高度和 overflow:auto，但子元素使用了绝对定位，父容器没有成为定位包含块时，滚动条可能不会按预期出现。此时子元素可能以更早的祖先或视口为参照，父容器的滚动区域就无法稳定覆盖它。
用定位让绝对子元素进入父容器滚动区域
关键技巧是让父容器成为绝对定位子元素的包含块。给父容器加上 position:relative，子元素即使使用 position:absolute，也会以父容器的定位上下文为参照进行布局。这样父容器的 overflow 区域能更稳定地覆盖子元素，滚动条出现也更符合预期。
如果希望子元素内容横向或纵向溢出，子元素本身不要设置过小的固定尺寸。可以让子元素宽度按内容伸展，或者给一个大于父容器的宽度。对于纵向滚动，设置 top:0 和 left:0，让高度自然展开，父容器固定高度后就会出现垂直滚动。
.parent {
position: relative;
height: 220px;
overflow: auto;
}
.child {
position: absolute;
top: 0;
left: 0;
width: max-content;
padding: 8px;
}这里 width:max-content 适合横向溢出。如果希望长文本在父容器宽度内换行并纵向滚动，可以改用 width:100% 或设置 max-width。绝对定位子元素不会把父容器撑大，但在父容器已经建立滚动区域时，子元素的边界仍可能参与滚动溢出计算，因此父容器要主动限制高度。
滚动条归属和常见失效场景
很多布局问题不是父容器不滚动，而是滚动条被隐藏或被外层容器抢走。如果父容器高度由百分比设置，必须确保祖先链上也有明确高度。否则百分比高度会失效，父容器没有固定尺寸，自然没有滚动。
在 flex 或 grid 布局中，子项默认最小尺寸可能阻止收缩。父容器虽然设置了 overflow:auto，但子项被长内容撑破，导致溢出发生在子项而不是父容器。常见处理是给可滚动子项设置 min-width:0 或 min-height:0，让溢出真正交给父容器。
.parent {
display: flex;
height: 240px;
overflow: auto;
}
.child {
flex: 1;
min-width: 0;
}另一个坑是 transform、filter 或 will-change 会改变定位包含块。绝对定位子元素看起来在父容器内，实际可能以另一个祖先为参照。遇到滚动条位置异常时，可以临时移除这些属性验证问题。
更稳妥的写法建议
如果业务允许，优先让普通流子元素撑开父容器，而不是用绝对定位制造溢出。普通流与 overflow 的关系更直观，维护成本也低。绝对定位更适合浮层、标记、局部覆盖等场景，不应该作为常规滚动方案的首选。
如果必须使用绝对定位，建议把父容器写成固定高度或最大高度，并显式设置 position:relative。子元素只负责内容展示，不负责撑开父容器。这样可以把裁剪边界和滚动边界都控制在父容器上，减少浏览器差异。
.parent {
position: relative;
height: 260px;
max-height: 260px;
overflow: auto;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
height: auto;
}注意 right:0 与 left:0 同时存在会让子元素宽度跟随父容器内容区域，适合纵向滚动。若需要横向滚动，不要同时限制左右边界，否则子元素会被拉伸到父容器宽度，无法产生横向溢出。