flex:1在移动端撑开容器的主因是默认min-width:auto阻止子项压缩，必须对flex直接子元素设min-width:0才能启用溢出控制；若父容器无宽度约束、子项含width:100%或替换元素未限尺寸，仍会失效。
flex: 1 为什么在移动端还是撑开容器
根本不是 flex: 1 失效，而是它默认搭配的 min-width: auto 在作祟。移动端视口窄，一串无空格的长文本（比如 API 返回的 token、URL）、一张未约束尺寸的图片，或 white-space: nowrap 的标题，都会让子元素“拒绝变小”——哪怕父容器只剩 320px 宽，它也要按内容固有宽度渲染，直接撑破布局。
为什么必须加 min-width: 0，而不是只靠 overflow 或 word-break
只写 overflow: hidden、text-overflow: ellipsis 或 word-break: break-all 没用，因为这些规则生效的前提是：容器得先“有边界”。而 min-width: auto 锁死了最小宽度，浏览器优先保障内容完整，根本不会触发截断或换行逻辑。
-
min-width: 0是开关：告诉浏览器“允许这个子项压缩到 0”，这才给后续的溢出控制让出空间 - 它必须加在
flex的**直接子元素**上，嵌套一层就失效 - 移动端尤其容易漏掉：父容器没设
max-width、子项用了width: 100%（和flex: 1冲突）、或用了flex-shrink: 0
移动端 column 布局下 min-width: 0 还管用吗
管用，但方向要对。如果 flex-direction: column，主轴是垂直方向，那真正需要约束的是水平方向的宽度——此时 min-width: 0 依然有效（因为文本换行、省略号都发生在行内轴，即水平方向），但你必须额外确保：
- 该子项自己有明确的水平约束：
max-width: 100%或具体值（比如max-width: 375px） - 别指望
flex: 1在 column 下自动限制宽度——它只管高度分配 - 若子项内部还有 flex 容器（如头像 + 文字块），内层也需要加
min-width: 0
加了 min-width: 0 还撑开？排查这三处硬冲突
常见“加了也不起作用”的真实原因：
-
flex-basis被设成具体内容宽，比如flex: 1 1 auto或flex-basis: 200px；建议统一用flex: 1 1 0 - 子项写了
width: 100%或max-width: none，它们优先级高于flex-grow分配 - 子项是替换元素（
<img>、<input>）且没设max-width: 100%，或用了position: absolute/float，已脱离 flex 格式化上下文
真正难的不是加那一行 min-width: 0，而是每次溢出都要确认：它是否真作用在 flex 直接子项上、有没有其他样式在覆盖、父容器宽度是否被约束、文本控制三件套（white-space/overflow/text-overflow 或 overflow-wrap）有没有写全——漏一个，效果就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
