flex列表不滚动的根本原因是缺少可滚动的高度上下文：父容器需显式高度，.items需flex:1+overflow-y:auto+min-height:0，标题应flex:none参与布局而非sticky脱离流。
为什么只设 flex-direction: column 列表不滚动
加了 flex-direction: column 后列表仍无法滚动，本质是 Flex 项目没获得「可滚动的高度上下文」。Flex 容器不会自动把剩余空间分配给某个子项——它需要明确的高度约束和弹性分配指令。
- 父容器（如
.list-container）必须有显式高度，比如height: 100vh或min-height: 500px；设height: auto或不设高度，flex: 1就无空间可占 - 标题（
.header）不能靠position: sticky临时“粘住”，否则脱离文档流，破坏 Flex 高度计算逻辑 - 列表内容区（
.items）必须同时满足：flex: 1+overflow-y: auto；只写一个无效 - 某些旧版 Safari 对
flex: 1在column布局中的收缩行为支持弱，建议补上min-height: 0
固定标题的正确结构与样式组合
标题固定 ≠ 标题脱离布局流。真正稳定的做法是让标题作为 Flex 子项参与排列，再用 flex: none 锁定尺寸，由中间区域主动“撑开并滚动”。
-
.list-container：设display: flex; flex-direction: column; height: 100vh;（或具体像素值） -
.header：设flex: none; height: 48px;（或flex-shrink: 0），避免被压缩 -
.items：设flex: 1; overflow-y: auto; min-height: 0;——min-height: 0是关键，防止 Flex 默认最小高度干扰滚动触发 - 别在
.items内部再套一层display: flex而不设height: 100%，否则滚动容器实际高度为 0
overflow-y: auto 不生效的三个典型原因
滚动条不出现、内容直接溢出容器外，通常不是 Flex 方向问题，而是滚动上下文被意外切断。
-
.items的父元素（即 Flex 容器）没有设置height或max-height，导致overflow失去作用边界 - 列表项（
li或.item）用了position: absolute或transform，脱离主轴，使flex: 1计算高度时忽略它们 - 在 iOS 上，忘了加
overscroll-behavior-y: contain，导致滚动穿透到 body，视觉上像“没滚动” - 使用了
height: fit-content替代flex: 1—— 这个值不参与 Flex 分配，也不会触发滚动
移动端真机测试必须检查的细节
iOS Safari 对 Flex + 滚动的组合特别敏感，很多表现只在真机上暴露。
- 打开「设置 → 辅助功能 → 减少动画」后，确认列表展开/收起是否仍保持滚动位置（
scroll-behavior: smooth在此模式下常失效） - 软键盘弹出时，
100vh会缩容，改用min-height: 100dvh（如支持）或监听resize动态更新高度 - 如果标题含图标+文字，用
display: flex; align-items: center替代line-height垂直居中，避免字体加载延迟导致跳动 - 避免对
.items使用will-change: transform，它可能干扰 Safari 的滚动合成层判断
html 和 body 的高度继承，到容器的 height，再到子项的 flex 行为和 overflow 边界，缺一不可。最容易被跳过的，是 min-height: 0 和 overscroll-behavior-y: contain 这两个看似次要却决定体验是否稳定的配置。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
