min-width: 0必须加在flex直接子元素上，因其仅解除该子项默认min-width: auto限制，使flex-shrink生效；加在父容器或嵌套内层无效，浏览器按子项自身computed min-width值决定是否压缩。
min-width: 0 是必须加在子元素上的，不是父容器——加错位置就完全无效。
为什么 min-width: 0 必须写在 flex 子项上？
Flex 的收缩逻辑只作用于直接子项。父容器设 min-width: 0 对子项宽度毫无影响，它只是限制自身最小宽度。浏览器计算子项尺寸时，会检查该子项自身的 min-width 计算值；如果仍是 auto（DevTools 中 computed 样式可见），它就会按最长单词或 URL 宽度锁定最小尺寸，哪怕父容器再窄也拒绝压缩。
- ✅ 正确：给含文本的
<p>或<span>加min-w-0 - ❌ 无效：只给
<div class="flex">加min-w-0 - ⚠️ 嵌套场景下，内层 flex 子项（如头像旁的文字块）也要单独加
min-w-0，不能靠外层“传染”
text-overflow: ellipsis 在 Tailwind 中不生效的硬性条件
它只对块级、单行、有明确宽度约束且被裁剪的元素起作用。漏掉任意一条都会失效：
-
whitespace-nowrap必须写在含文本的子元素上，不能写父容器——否则文字提前折行，根本没机会溢出 -
overflow-hidden必须作用于同一元素，且该元素得是块级；<span>类行内元素要先加block -
min-w-0必须存在，否则flex-shrink被内容宽度卡住，裁剪逻辑压根不触发 - 父容器要有
w-full、max-w-md等宽度约束，否则 Flex 容器按内容自适应，不存在“剩余空间”供收缩
flex-1 和 flex-[1_1_0] 的实际差别
两者都常用，但关键在第三个参数 flex-basis：
立即学习“前端免费学习笔记（深入）”；
-
flex-1等价于flex-[1_1_0%]，0%是相对父容器计算的百分比，渲染前无法确定基准，容易导致截断不稳定 -
flex-[1_1_0]中的0是像素值，明确表示“初始宽度为0px”，后续所有伸缩都基于这个确定起点，配合min-w-0后文本容器宽度才可控 - Safari 旧版本对
flex-basis: 0支持不稳，建议补flex-basis-0%兜底，或保留min-w-0
容易被忽略的嵌套与兼容性坑
溢出问题常藏在深层结构里：
- 子项内部还有 Flex 容器（如头像+文本+按钮），内层需收缩的子项也得单独加
min-w-0，外层加了没用 -
<img>或<iframe>有固有尺寸，必须额外加max-w-full和h-auto - 子项用了
p-4但没设box-border，padding 会叠加在flex-basis之外，直接导致总宽超限 - 移动端 Safari 可能误读
min-w-fit，覆盖掉min-w-0，检查 computed 样式确认
真正卡住的往往不是 min-w-0 本身，而是它和 overflow-hidden、whitespace-nowrap、text-ellipsis 这四者是否落在同一元素上。
