flex: 1 的真实含义是 flex-grow: 1 flex-shrink: 1 flex-basis: 0%，其默认 min-width: auto 会阻止收缩，导致 text-overflow: ellipsis 失效；必须在目标子元素上显式设置 min-width: 0 才能启用真正收缩。
flex: 1 的真实含义不是“自适应填满”，而是 flex-grow: 1 flex-shrink: 1 flex-basis: 0%
它会让子元素先按 flex-basis: 0% 计算初始宽度（即“从 0% 开始分剩余空间”），再按 flex-shrink: 1 允许压缩。问题就出在这儿：0% 是相对父容器宽度计算的百分比，但渲染前父容器宽度可能未确定（比如父容器宽为 auto 或受内容影响），导致基准失效；更关键的是，子项仍保留浏览器隐式 min-width: auto，文字、URL、图片等会死守自身最小内容宽，宁可撑破容器也不收缩。
text-overflow: ellipsis 在 flex: 1 下不生效的直接原因
不是属性写错了，而是 flex: 1 默认带 flex-shrink: 1，但它收缩时被 min-width: auto 卡住——文字容器压根没机会“溢出”，overflow: hidden 和 text-overflow: ellipsis 就成了摆设。DevTools 里检查目标元素的 computed min-width，若仍是 auto，基本锁定根源。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
white-space: nowrap必须加在文本所在子元素上，不能写父容器 -
overflow: hidden和text-overflow: ellipsis必须与min-width: 0同级同元素，缺一不可 - 行内元素（如
span）要先加display: block，否则text-overflow不起作用
flex: 1 1 0 比 flex: 1 更可控，但 Safari 旧版需兜底
flex: 1 1 0 中的 0 是像素值（0px），明确表示“初始宽度为 0”，后续伸缩都基于这个确定起点，配合 min-width: 0 后文本容器宽度才真正可控。而 flex: 1 等价于 flex: 1 1 0%，0% 在某些场景下（如嵌套 flex、无明确 width 的父容器）会退化为 auto，导致截断不稳定。
- Safari ≤14.1 对
flex-basis: 0支持不稳，建议补flex-basis: 0%或保留min-width: 0 - 若子项含图片或 iframe，必须额外加
max-width: 100%和height: auto，否则固有尺寸会破坏 flex 分配 - 子项用了
padding但没设box-sizing: border-box，padding 会叠加在flex-basis外，直接导致总宽超限
真正卡住的往往不是 flex: 1 本身，而是它和 min-width: 0 的配合时机
很多开发者加了 flex: 1 就以为万事大吉，却忘了它默认不解除浏览器对内容最小宽度的保护。min-width: 0 不是可选优化，而是必要开关——它覆盖 min-width: auto，让 flex-shrink 真正生效。但这个值必须加在**目标子元素上**，加在父容器或外层 wrapper 上完全无效。
- 嵌套 flex 场景下，内层需收缩的子项也得单独加
min-width: 0，外层加了没用 - 移动端 Safari 可能误读
min-width: -webkit-fit-content，覆盖掉min-width: 0，务必检查 computed 样式确认 - 如果子项是
display: inline-block或含white-space: nowrap，Safari 旧版可能忽略min-width: 0，此时需改用flex-shrink: 0+overflow: hidden强制截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
