flex子项min-width不生效的根本原因是默认min-width: auto锁定内容固有宽度，必须显式设置min-width: 0才能解锁收缩与换行控制，且仅对Flex直接子项有效，需配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block等条件同级生效。
flex子项min-width不生效，先看是否漏了min-width: 0
Flex子项默认带min-width: auto，它会把长URL、连续英文、中文标点串的“内容固有宽度”当作不可压缩底线。哪怕你写了min-width: 200px，只要内容本身更宽，它就按内容宽；内容窄时，又因min-width: auto被撑开——结果就是溢出或尺寸飘忽。
必须显式加min-width: 0，这是解锁收缩与换行的开关。它不等于“强制缩成0px”，而是告诉浏览器：“允许我缩到比内容还小”。没这句，overflow-wrap: anywhere、text-overflow: ellipsis全白搭。
- 只对Flex容器的**直接子元素**有效，中间嵌套一层
<div>就失效 - 若子项本身是
<span>或<a>这类inline元素，得先加display: inline-block或display: block，否则min-width: 0被忽略 - Tailwind中
flex-auto默认含min-width: 0，但flex-1不带，注意区分
width和min-width冲突时谁起作用
min-width永远优先于width：三者关系是min-width ≤ 实际宽 ≤ max-width。比如width: 200px; min-width: 300px;，最终宽就是300px。
但更常见的情况是width根本没参与计算——因为Flex布局里真正主导主轴尺寸的是flex-basis，不是width。
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: auto时，width才作为fallback；一旦设了非auto值（如flex-basis: 200px），width就被完全忽略 - 想稳控尺寸，用
flex: 0 0 200px（不拉伸、不压缩、基准200px），比写width: 200px可靠得多 - 百分比
flex-basis: 30%依赖父容器主轴方向的**已知宽度**；若父容器没设width或max-width，那30%就是30% × 0 = 0px
box-sizing和padding如何干扰min-width视觉表现
写了min-width: 200px却看到实际宽远超200px？大概率是box-sizing: content-box在作祟：总宽 = min-width + 左右padding + 左右border。
统一加box-sizing: border-box，让min-width包含padding和border。全局重置推荐：* { box-sizing: border-box; }（放在所有CSS最前面）。
- 若已用
calc()手动减去padding，再切border-box会导致内容区被压缩，需同步删掉calc()逻辑 - 表单控件如
<input>在iOS Safari中受-webkit-appearance: none影响，必须先加它再设min-width -
min-width只约束水平方向，高度限制要用min-height配合height: auto或line-height
text-overflow: ellipsis不生效的硬性条件
只写overflow: hidden和text-overflow: ellipsis肯定不行。省略号触发需要四个条件同时满足：
-
min-width: 0（开关，必须加在文本所在元素上） -
white-space: nowrap（禁止换行，必须写在同一元素） -
overflow: hidden（裁剪动作） -
display: block或inline-block（text-overflow只对块级格式化上下文生效）
另外，该元素还得有明确宽度来源：width、max-width或稳定的flex-basis（不能是flex: 1推导出的“剩余空间”）。典型错误写法：.item { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }→ 缺min-width: 0，必然失效。
真正容易被忽略的点在于：这个限制存在于整条渲染链路中，从Flex算法到文本排版再到BFC生成，任何一个环节断掉，min-width就只是个摆设。
