根本原因是flex子项默认min-width: auto阻止收缩，必须显式设min-width: 0（横向）或min-height: 0（纵向），并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis四者缺一不可。
为什么 flex 子项加了 overflow: hidden 还是不截断
因为 min-width: auto 在拦路。Flex 子项默认带这个值，它不是“0”也不是“fit-content”，而是浏览器根据内容算出的固有最小宽度——哪怕你写了 overflow: hidden、text-overflow: ellipsis，只要这个最小宽度没被覆盖，元素就死活不肯缩，裁剪区域根本建不起来。
必须在目标子元素（比如 .title 或 input）上显式写 min-width: 0，不能写在父容器上，也不能写成 min-width: 0px 或 min-width: 0%——只有无单位的 0 是规范写法，全浏览器兼容稳。
- Firefox 对
min-width: auto执行最严格，Chrome 有时会“妥协”，但别赌 - 如果子项同时设了
flex-shrink: 0，删掉它——和min-width: 0冲突，等于锁死宽度 - 嵌套一层 div 就不管用：
min-width: 0只对 flex 直接子元素生效
flex: 1 为啥没让子项自动收缩
flex: 1 看似能撑能缩，但它的收缩能力被 min-width: auto 直接封印了。Flex 规范明确说：“A flex item cannot be smaller than the size of its content along the main axis.” 换句话说，只要内容本身宽（比如一串无空格的 Base64、URL），flex-shrink 就不会启动。
真正起效的组合是：flex: 1 1 0 + min-width: 0。其中 flex-basis: 0（第三个参数）配合 min-width: 0，才能让浏览器放弃内容宽度底线，进入 flex 收缩计算流程。
立即学习“前端免费学习笔记（深入）”；
- 只写
flex: 1不够，旧版 Safari 可能不认隐含的min-width: 0 - 若主轴是 column，对应要写
min-height: 0，不是min-width - 父容器必须有
width或max-width，否则“溢出”无参照，整个逻辑失效
长单词、URL 撑破容器时 word-break 为啥没反应
word-break: break-all 或 overflow-wrap: break-word 不是开关，它们只在元素“允许换行”的前提下才工作。而 min-width: auto 让浏览器优先保全文本完整显示，连换行机会都不给——所以这些属性压根不触发。
正确顺序是：先用 min-width: 0 解锁收缩，再让换行规则有机会介入。否则，浏览器宁可把父容器拉宽、出现横向滚动条，也不折那一行。
- 对纯文本子项，推荐优先用
overflow-wrap: break-word（语义更合理），word-break: break-all作兜底 - 如果子项是
img，除了min-width: 0，还得加max-width: 100%和height: auto，否则图片可能变形或撑高 - 替换元素（如
input、textarea）也要单独处理：min-width: 0能解压缩，但建议配min-width: 120px保可用性
移动端 Flex 布局突然横向滚动，怎么快速定位
90% 是某个 flex 子项漏了 min-width: 0，尤其藏在组件库或第三方 UI 框架里。常见诱因包括：未设宽的 img、带长 URL 的 p、没约束的 span、或者用了 white-space: nowrap 却没配截断逻辑。
排查时别只盯 overflow，先查子项 computed style 里的 min-width 是否还是 auto。如果是，就找到那个元素，加上 min-width: 0，再看是否还撑开。
- 不要依赖 “flex 自动处理”——
min-width: auto是规范行为，不是 bug - 响应式场景下，
min-width: 0必须和max-width配合，否则小屏仍可能溢出 - 加完
min-width: 0后如果高度异常，检查是否误用于块级替换元素，需补height: auto或align-self: flex-start
