flex子元素加overflow-y:auto无效，根本原因是浏览器默认min-height:auto锁死收缩底线，必须同时满足：父容器有明确高度约束、子项设min-height:0、滚动层单独包裹。
直接给 flex 子元素加 overflow-y: auto 通常没用——不是 CSS 写错了，而是浏览器根本没判定出“溢出”，滚动条自然不会出现。
为什么 overflow-y: auto 在 flex item 上完全不触发
Flex 子项默认 min-height: auto（纵向）或 min-width: auto（横向），这意味着它宁可把父容器顶高/撑宽，也不愿自己缩小。只要容器高度始终 ≥ 内容高度，overflow-y: auto 就永远不生效。
- 用
border: 1px solid red临时检查父容器是否真有固定高度——比猜更准 - 如果父容器是
flex: 1，它的所有上级（html→body→ 中间每层）都必须设height或max-height，否则flex: 1无效 -
overflow-y: auto必须加在“有明确高度约束”的那一层上，而不是最外层布局容器，也不是最内层内容块
必须同时满足的三个硬性条件
缺一不可，否则滚动逻辑压根不启动：
- 父容器（或整条 Flex 链路）有明确高度/宽度约束，例如
height: 100vh、max-height: 500px或通过flex: 1逐级传递下来的可用空间 - 直接承载可滚动内容的 flex item 必须设
min-height: 0（纵向）或min-width: 0（横向）——这是修复 Chrome/Firefox 的 flex 最小尺寸计算 bug 的关键 - 滚动行为要隔离：不能把
overflow-y: auto直接加在flex: 1的布局占位元素上，得额外包一层，比如<div class="scroll-area"> <h3>横向滚动（overflow-x）失效的典型配置</h3> <p>90% 的横向滚动失败，是因为主轴方向和收缩控制没对齐：</p> <ul> <li>父容器必须有显式 <code>width或max-width（如width: 100%），否则 Flex 会无限撑开 - 子项需设
flex-shrink: 0或flex: 0 0 auto，否则即使总宽超限，也会被压缩而非溢出 - 若子项含图片、
<input>等固有尺寸元素，还得补min-width: 0松绑其最小宽度限制 - iOS Safari 需额外加
-webkit-overflow-scrolling: touch和touch-action: pan-x，否则拖不动或惯性丢失
移动端 Safari 滚动异常最容易忽略的一点
iOS Safari 对嵌套 flex + overflow 的兼容性极苛刻，尤其当滚动容器还带 transform 或 position: fixed 时，overflow-x: auto 可能完全静默。
- 必须给滚动容器（即实际加了
overflow-x: auto的那层）加上-webkit-overflow-scrolling: touch - 不要依赖
flex: 1动态算高宽——iOS 下它常返回0或错误值，改用height: 0+flex: 1组合更稳 - 如果滚动区域内部还有
position: sticky或will-change，先临时移除测试，它们会干扰 iOS 的滚动检测逻辑
真正卡住人的往往不是“怎么写”，而是“该在哪一层写”和“哪一层必须加 min-height: 0”。多一层包裹看似冗余，但它是让 flex 和 overflow 协同工作的唯一可靠方式。
