ios safari中flex容器滚动需同时满足高度链完整、滚动层独立和min-height:0重置；缺一不可，否则overflow-y:auto静默失效。
不是 overflow 属性写错了，而是 iOS Safari 对 Flex 容器内滚动的触发条件比桌面端更严格——它要求「高度链完整 + 滚动层独立 + min-height 重置」三者同时成立，缺一不可。
父容器没设 height/max-height，overflow-y: auto 就不会触发
iOS Safari 不会主动为 flex 子项“分配剩余空间”后还去判断溢出；它只在容器有明确像素高度（比如 height: 400px 或 max-height: 60vh）时，才开始计算内容是否超出。用 height: 100% 或 flex: 1 却不约束祖先高度，等于没写。
- 临时验证：给容器加
border: 1px solid red，看它是否真有你预期的高度 - 常见断点：
html→body→.wrapper→.list-container中任意一级没设高度，整个链就失效 - 别信模拟器：真机上图片加载、字体回流可能让初始有效的高度链后续塌陷
滚动区域必须是独立 wrapper，不能直接加在 flex: 1 元素上
把 overflow-y: auto 直接写在 flex: 1 的子项上，iOS Safari 会优先拉伸该元素填满空间，而不是让它内部滚动——结果就是容器越拉越高，滚动条永远不出现。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 正确结构：
.list-wrapper { flex: 1; }+.list-scroll { overflow-y: auto; min-height: 0; } -
min-height: 0是关键，它覆盖浏览器对 Flex 子项默认的min-height: auto锁定 - 如果
.list-scroll内部还有 flex 子项（比如卡片列表），它们也得加min-width: 0防止横向撑开
iOS 必须加 -webkit-overflow-scrolling: touch
这个属性虽已被标记为废弃，但 iOS Safari（截至 17.6）仍依赖它启用惯性滚动和触控响应。不加，滚动会卡顿、无回弹、甚至完全无响应。
- 只加在真正负责滚动的 wrapper 上，比如
.list-scroll { -webkit-overflow-scrolling: touch; } - 不要加在父级 flex 容器或 body/html 上——无效且可能干扰其他交互
- 搭配
overflow-y: auto使用，overflow: scroll在 iOS 上容易渲染空滚动条
横向滚动（overflow-x）额外要防 flex-shrink 和 white-space
横向滑动失效，90% 不是 overflow 写错，而是子项被 Flex 默认收缩机制压扁了，或者文本自动换行掩盖了宽度溢出。
- 子卡片必须加
flex-shrink: 0，否则它们会被压缩到无法显示全貌 - 含文字的子项加
white-space: nowrap，防止内部换行导致“看起来没溢出” - 父容器显式设
width或max-width（如width: 320px），不能只靠flex: 1
最容易被忽略的是 min-height: 0 ——它不像 overflow 那样显眼，但一旦漏掉，整个滚动链就在 iOS Safari 里静默断裂。真机测试前，先用 getComputedStyle(el).minHeight 确认它确实是 0px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
