min-width: 0是必须第一步，因为它显式覆盖Flex子项默认的min-width: auto（等价于fit-content），解除浏览器强制“至少容下最长连续字符串”的收缩锁，否则overflow、text-overflow等后续样式均无法触发。
为什么min-width: 0是必须第一步，而不是可选项
Flex子项默认min-width: auto（等价于fit-content），浏览器会把它理解为“至少得容下最长连续字符串”，哪怕是一整串https://example.com/a-very-long-path-with-no-spaces。此时无论你加overflow: hidden还是text-overflow: ellipsis，它都压根不收缩——裁剪动作根本没触发，容器早被撑开了。
这个min-width: auto是隐式生效的，DevTools 的 Computed 面板里可能不直接显示，但它真实存在、且只作用于 flex 直接子元素。所以：
-
min-width: 0必须写在含文本的那个子元素上，比如.title或p，不是父容器.container - 如果子项还设了
flex-shrink: 0，那min-width: 0会被忽略——得先删掉flex-shrink: 0 - 嵌套 flex 场景（如头像+文字块再包一层
display: flex）要逐层加，不能靠继承
flex: 1 1 0和flex: 1到底差在哪
flex: 1是flex: 1 1 0%的简写，而0%是相对父容器宽度计算的百分比。问题在于：渲染前父容器宽度未定，flex-basis推导就容易出错，尤其遇到长内容时，浏览器可能回退到内容宽，导致收缩失效。
flex: 1 1 0里的0是像素值，明确表示“初始宽度为 0px”，后续伸缩全部基于这个确定起点。配合min-width: 0后，文本容器宽度才稳定可预期。
旧版 Safari（≤15.6）对flex-basis: 0解析不稳定，稳妥起见可补一句：flex-basis: 0%;
长URL或哈希串撑开怎么办：别只靠overflow-wrap: break-word
即使配齐min-width: 0、flex: 1 1 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis五点，一串无空格的eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9仍会撑开——因为overflow-wrap: break-word需要容器先被允许压缩，才有换行前提。
顺序不能错：
- 先加
min-width: 0解锁收缩权限 - 再加
max-width: 100%（或具体值如max-width: 300px），给换行提供参照宽度 - 最后加
overflow-wrap: break-word（旧名word-wrap: break-word仍可兼容）
技术字段（token、日志 ID、API 路径）建议兜底加word-break: break-all；中文或中英混排正文用word-break: break-word（注意不是已废弃的word-break: break-word）。
移动端和 Safari 最容易漏的三个点
小屏下min-width: 0必须配合max-width: 100%，否则在flex-direction: column里，文本仍可能水平溢出——flex: 1在竖排时只管垂直方向，不管水平宽度。
常见漏点：
- 父容器没设
width或max-width：容器宽度无限，就不存在“溢出” -
overflow: hidden加在外层 wrapper，但实际溢出发生在内层p上 - 调试时没盯住 DevTools 的 Computed 面板：重点确认目标元素的
min-width是否真为0px、flex-basis是否稳定为0px、white-space是否为nowrap
真正难的不是写对某一行代码，而是每次遇到溢出都得回头检查这四环：父容器有没有宽度约束、子项是不是 flex 直接子、min-width有没有被覆盖、截断三件套有没有写全——漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
