Flex容器中某列需独立滚动，必须设置固定高度（如max-height）并禁用flex: 1，改用flex: 0 0 auto配合overflow-y: auto，同时确保父级无overflow: hidden拦截。
Flex容器里某列需要独立滚动，必须设固定高度
Flex默认不触发滚动，因为子项高度由内容撑开，overflow-y: auto 无效。关键前提是：目标列（即要滚动的 div）必须有明确的高度约束，不能依赖 flex: 1 或 height: auto。
- 推荐用
flex: 0 0 auto+max-height组合，比单纯height更适应内容变化 - 如果父容器是
flex-direction: row，那这一列必须设overflow-y: auto，且不能让其他列用flex: 1抢走剩余空间 - 常见错误：只加
overflow-y: auto却没设max-height或height，滚动条永远不会出现
避免 flex: 1 导致滚动失效
当某列写成 flex: 1，它会占据所有剩余空间，哪怕内容超长也继续撑高，overflow 失效。这不是 bug，是 Flex 的正常行为。
- 要滚动的列改用
flex: 0 0 300px或flex: 0 0 50%，再配合max-height: 400px - 相邻列可用
flex: 1，但必须确保它们不干扰目标列的高度计算 - 如果整行高度由内容决定（比如
align-items: stretch），目标列会被拉伸，此时需额外加align-self: flex-start
滚动条只出现在目标列，别被父容器截断
父级 Flex 容器或其祖先若设置了 overflow: hidden，或者用了 contain: layout，会剪掉子元素溢出部分，导致滚动条“消失”。
- 检查所有上层节点，特别是
body、html、布局 wrapper，确认没有意外的overflow: hidden - 目标列的
overflow-y: auto必须作用在实际内容容器上，不是 Flex item 外层包装盒 - 某些浏览器（如 Safari）对
flex-direction: column下的滚动支持较弱，多列场景优先用row
Chrome/Firefox/Safari 行为差异点
Firefox 对 flex: 0 0 auto + max-height 的处理最稳定；Chrome 在嵌套 Flex 中偶尔忽略 max-height；Safari 对 overflow-y: auto 的触发条件更苛刻。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法：
flex: 0 0 0; min-width: 0; max-height: 300px; overflow-y: auto; - Safari 下如果仍不滚动，加
-webkit-overflow-scrolling: touch（仅影响 iOS） - 不要依赖
height: 100%，它在 Flex 里常解析为auto，尤其当父容器没显式高度时
overflow 却忘了砍断高度继承链，或者被某个看不见的 overflow: hidden 拦在半路。 
