容器未设 height 或 max-height 时无滚动条，因 flex 子项默认撑高父容器；需显式设置高度、分层处理 overflow（flex:1 占位 + 内层 wrapper 加 min-height:0 和 overflow-y:auto），并为 ios safari 添加 -webkit-overflow-scrolling:touch。
容器没设 height 或 max-height，浏览器根本不算“溢出”
加了 overflow: auto 却没滚动条，90% 是因为容器高度没被约束。Flex 子项默认会撑高父容器，哪怕内容很长，父容器也跟着长——它永远不满足“内容高度 > 容器高度”这个触发条件。
常见错误写法：.list { display: flex; flex-direction: column; overflow-y: auto; } —— 缺少 height 或 max-height，等于白写。
- 必须显式设置
height: 400px或更实用的max-height: 60vh -
min-height不行，它不构成溢出判定边界 - 临时加
border: 1px solid red看容器是否真有高度，比猜更快
flex: 1 的子项直接加 overflow: auto 是错的
把 overflow-y: auto 直接写在 flex: 1 元素上，会导致它既占位又滚动，破坏 Flex 布局逻辑，且在 Chrome/Firefox 中常因最小高度计算 bug 而失效。
正确结构是分层：占位用 flex: 1，滚动交给内层 wrapper。
-
.list-wrapper { flex: 1; }（只负责撑满空间） -
.list-scroll { overflow-y: auto; min-height: 0; }（min-height: 0是关键，修复 Flex 子项收缩 bug） - 再往里才是真实内容容器，比如
.list-content
Flex 子项被自动压缩，内容“假装没溢出”
横向滚动（overflow-x: auto）不生效，往往不是 overflow 写错了，而是子项被 flex-shrink: 1 默认压扁了——哪怕你写了 width: 200px，它也可能缩成 80px，结果内容没撑开，自然不触发滚动。
- 容器必须有明确宽度：
width: 100%或max-width: 600px - 子项设
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 文字类子项额外加
white-space: nowrap，防止内部换行掩盖水平溢出
iOS Safari 滚动卡顿或无响应
即使样式全对，在 iOS Safari 里拖拽滚动区域仍可能迟钝甚至不动——这不是 bug，是 WebKit 的默认行为限制。
- 必须给滚动容器加
-webkit-overflow-scrolling: touch - 该属性已废弃但仍是 iOS 必选项，不加就大概率失灵
- 搭配
overflow-y: auto使用，不要只写overflow: auto
height 或 max-height，就没有溢出；没有 min-height: 0，Flex 就不会收缩；没有 -webkit-overflow-scrolling: touch，iOS 就不认你是可滚动区。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
