iOS Safari中flex容器设height: 100%仍无法滚动，根本原因是其对高度继承链极度敏感：只要直接父元素未显式设置确定高度（如height: 100vh或具体像素值），flex: 1或height: 100%即退化为auto，导致滚动区域失去计算锚点；必须逐层显式声明html、body及所有中间父容器的高度，且不能依赖min-height或calc(100vh - Xpx)，同时需配对使用-webkit-overflow-scrolling: touch与overflow: auto才能启用硬件加速滚动。
flex容器设了height: 100%但iOS Safari里仍无法滚动
根本原因是Safari对高度继承链极其敏感：只要父级没显式高度（比如height: 100vh或height: 500px），flex: 1或height: 100%就会退化为auto，滚动区域失去锚点。这不是“不支持”，是它压根没算出可滚动范围。
必须确保滚动容器的**直接父元素有确定高度**，且该高度不能依赖min-height或max-height——Safari 12–14.1对这些属性的解析会中断flex高度传递链。
-
html, body { height: 100% }+.scroll-container { height: 100% }不够，要写成.scroll-container { height: 100vh } - 嵌套flex时，每一层都得加
height或flex-basis，漏一层就断 - 避免用
calc(100vh - 60px)，iOS 13.3及更早版本会把vh解析为视口初始高度，缩放后不更新
overflow: scroll在iOS Safari中点了没反应
只写overflow: scroll不够，iOS WebKit需要明确启用硬件加速滚动引擎，否则触摸事件被拦截或延迟响应。
-webkit-overflow-scrolling: touch不是可选项，是开关——没有它，overflow在iOS上基本等同于visible。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须和
overflow成对出现，且-webkit-overflow-scrolling写在后面（顺序影响解析） - 该属性仅对
overflow: auto或scroll生效，hidden或visible下无效 - Safari 15.4+已支持原生
overflow: scroll，但iOS 14.8及更早设备仍需前缀
子项内容撑开容器导致横向滚动失效
flex默认flex-shrink: 1，但若某个子项写了flex-shrink: 0或含不可折行内容（如长URL、无空格字符串），它会拒绝收缩，顶破overflow: hidden边界，导致整个容器无法纵向滚动。
关键不是删掉flex-shrink: 0，而是切断它的“刚性”——给它加min-width: 0，让文本截断逻辑能介入。
- 所有可能溢出的子项必须加
min-width: 0（水平主轴）或min-height: 0（垂直主轴） - 配合
word-break: break-all或text-overflow: ellipsis，但后者需同时设white-space: nowrap - 图片子项要额外加
width: 100%和height: auto，否则Safari会冻结其内在尺寸估算
小程序里flex布局滑动卡顿或完全不动
微信/支付宝小程序的iOS WebView内核基于旧版Safari（常为iOS 12–13对应内核），不仅缺-webkit-overflow-scrolling支持，还会因事件冒泡机制异常导致touchmove被吞。
不能只靠CSS，必须补JavaScript层干预：记录touchstart位置，手动计算scrollTop并赋值，绕过浏览器原生滚动判断逻辑。
- 监听
touchstart存e.touches[0].clientY，再在touchmove里用deltaY驱动scrollTop - 避免在
touchmove里调用preventDefault()，否则会禁用惯性滚动 - 容器需设
position: relative，否则scrollTop操作无效
实际项目里最容易被忽略的，是高度锚点必须从html开始逐层显式声明，而不是靠flex: 1层层推导——Safari对推导链的容忍度极低，断一环，整条滚动链就瘫痪。
