flex:1 为什么在垂直滚动容器里不生效
因为 flex:1 本质是缩写 flex: 1 1 0，它依赖父容器有明确高度才能“撑开”子项；而如果父容器高度未设（比如只靠内容撑开），flex:1 就没参考系，自然不收缩也不拉伸，更不会触发滚动。
- 常见错误现象：
overflow-y: auto完全没反应，列表内容直接溢出容器下方 - 必须确保父容器有固定/可计算的高度：比如设
height: 100vh、max-height: 500px，或父级是display: flex; flex-direction: column且自身高度已知 - 如果父容器是
body或html，记得检查是否漏了height: 100%链路（html → body → .wrapper → .list每一级都得有高度传递）
正确写法：flex:1 + overflow-y 的最小必要结构
核心就三步：外层设高度、中间项用 flex:1 占位、内层容器设 overflow-y: auto 并允许内容自由伸缩。
- 典型结构：
.container { display: flex; flex-direction: column; height: 100vh; } .header { height: 60px; } .list-container { flex: 1; overflow-y: auto; } .list { display: flex; flex-direction: column; } -
.list-container是滚动主体，不是.list—— 后者只是内容容器，不能加overflow - 避免给
.list设height: 100%，它会强行压缩子项高度，导致项目被截断
移动端 Safari 滚动卡顿或不触发的坑
iOS Safari 对 flex:1 + overflow-y 的组合渲染比较保守，尤其嵌套深或含 transform 的场景下容易失效。
- 必加
-webkit-overflow-scrolling: touch到滚动容器（.list-container），否则惯性滚动丢失、拖拽迟滞 - 如果列表项用了
position: absolute或will-change: transform，可能破坏 flex 布局流，优先改用margin或align-self控制位置 - 避免在
.list-container上同时设padding和border-box混乱计算，统一用box-sizing: border-box
当 flex:1 和 max-height 冲突时怎么选
如果容器需要“最多占满视口，但内容少时不撑高”，flex:1 更合适；如果要求“永远最多 400px 高，超出才滚动”，直接上 max-height 更稳。
立即学习“前端免费学习笔记（深入）”；
-
flex:1适合布局上下文明确的场景（如 header + list + footer 固定结构） -
max-height更简单直接，兼容性更好，但无法响应兄弟元素高度变化 - 两者混用危险：
flex:1; max-height: 500px在某些 Chrome 版本里会导致滚动条忽隐忽现，建议二选一
height 或 flex 传下来，缺一环，flex:1 就彻底失联。 
