必须加min-width: 0，否则flex子项因默认min-width: auto锁定宽度而溢出；需作用于直系含文本子元素，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束。
移动端 flex 布局溢出不是布局写错了，而是浏览器默认行为在小屏下被放大了——min-width: auto锁死子项宽度、flex-wrap: nowrap强制单行、box-sizing: content-box让 padding 溢出边界，三者叠加，一碰就破。
为什么加了 display: flex 就横向滚动？
因为 flex 容器默认是 flex-wrap: nowrap，所有子项被硬塞进单行；哪怕父容器只有 375px 宽，一段长 URL 或连续英文（如 https://api.example.com/v2/users/me?token=xxx...）也会撑开整行，触发 overflow-x: auto 或直接切掉右边缘。
- 用 DevTools 的「Computed」面板确认
flex-wrap最终值是不是wrap，别只看源码写了没 - 检查是否误加了
flex-nowrap（Tailwind）或white-space: nowrap到不该加的地方 - 嵌套 flex 场景下，外层
flex-wrap: wrap不能拯救内层未设min-width: 0的文本项
min-width: 0 必须加在哪一层？
必须加在「直系 flex 子项」上，且是那个含文本/长内容的元素本身。比如：.card > .content 或 .item > span，不是父容器，也不是孙子节点。
- 常见漏点：头像 + 文字块组成卡片，文字块内部又是 flex 布局（如标题+副标），此时
.title和.subtitle都要单独加min-width: 0 -
min-width: 0不继承，flex: 1也不自动带它；flex: 1 1 0中的0是flex-basis，和min-width无关 - Firefox 对
min-width: auto执行更严格，Chrome 有时“妥协”，但别赌这个
想截断显示 text-overflow: ellipsis，四件套缺一不可
text-overflow: ellipsis 是纯装饰，不参与尺寸计算。漏掉任意一条，它就彻底失效。
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap：必须写在同个元素上，否则文字提前换行，根本没机会单行溢出 -
overflow: hidden：必须作用于块级元素（display: block或inline-block），span默认是行内，得显式改 -
min-width: 0：解锁收缩能力，否则flex-shrink被卡死 - 明确宽度约束：来自父容器的
max-width，或自身flex-basis；仅靠flex: 1不稳定，推荐flex: 1 1 0
iOS Safari 滚动卡顿或 fixed 元素错位怎么办？
横向滚动容器加了 overflow-x: auto 却卡顿，大概率缺了 -webkit-overflow-scrolling: touch；但它和 position: fixed 同用会引发定位错乱。
- 只对
overflow为auto或scroll的元素生效 - 若容器里有
position: fixed子元素（如悬浮按钮），禁用该属性，改用原生滚动方案（如margin-left: auto推右） - Tailwind 用户需手动加
style="-webkit-overflow-scrolling: touch;"，v3.3+ 仍无内置类 - 滚动区域务必设
box-sizing: border-box，否则padding会算进宽度，导致实际可用空间不足
真正难处理的从来不是某一行 CSS，而是哪一层该加 min-width: 0、哪一层该收住 flex-shrink、哪一层该补 box-sizing——这些决策点藏在嵌套最深的那层 flex 容器里，小屏一缩，全暴露。
