iOS Safari对min-width: 0解析更保守，因保留img/iframe等替换元素固有最小尺寸，需显式设min-width: 0和flex-shrink: 1才生效；white-space: nowrap须写在含文本的子元素上，否则text-overflow失效；flex-basis: 0在旧版中易误读，建议用flex-basis: 0%或0px兜底；overflow-x: auto需配合-webkit-overflow-scrolling: touch启用惯性滚动。
为什么iOS Safari对min-width: 0解析更保守
iOS Safari（尤其15–16）会保留替换元素（<img>、<iframe>）的固有最小尺寸，即使你写了max-width: 100%，它也可能无视——除非显式加min-width: 0和flex-shrink: 1到该元素本身。DevTools里看computed值，如果min-width仍是auto，就说明没生效。
white-space: nowrap写错层级导致text-overflow失效
在iOS Safari里，text-overflow: ellipsis必须配合white-space: nowrap才能触发单行截断，但这个white-space必须写在**含文本的子元素上**，比如<span>或<p>，不能只写在父容器。否则文字提前折行，根本没机会溢出，省略号自然不出现。
flex-basis: 0在旧Safari中解析异常
flex: 1 1 0本意是让子项初始宽度为0px，但某些iOS Safari版本会把0误读为0%甚至忽略，导致仍按内容宽度起始。稳妥做法是补一句flex-basis: 0%兜底，或者直接用flex: 1 1 0px（注意单位），同时保留min-width: 0。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
overflow-x: auto被默认禁用拖拽
给Flex容器设了overflow-x: auto，但在iOS Safari里手动拖不动——这不是bug，而是默认行为。必须加-webkit-overflow-scrolling: touch或overscroll-behavior-x: contain才能启用惯性滚动。漏掉这条，横向滚动条可能显示但无法滑动。
立即学习“前端免费学习笔记（深入）”；
真正卡住的往往不是某一行代码，而是min-width: 0、overflow: hidden、white-space: nowrap、text-overflow: ellipsis这四者没落在同一元素上，且该元素没被父容器的width或max-width约束住。 
