flex子项默认min-width: auto会锁死收缩，导致横向溢出；必须显式设min-width: 0才能激活flex-shrink，再配合overflow-wrap: break-word处理长单词。
Flex子项默认的min-width: auto是横向溢出最常被忽略的根源——它会让文本、图片、input等元素“宁可撑破容器也不收缩”，哪怕你写了flex: 1或width: 100%也无效。
为什么min-width: auto会锁死收缩？
浏览器对替换元素（如img、input、button）和含内联内容的块级元素，强制赋予min-width: auto，意思是“至少要和内容一样宽”。这个值优先级高于flex-shrink，导致Flex布局的收缩逻辑直接失效。
常见现象包括：
- 搜索框右侧图标被压缩变形
- 卡片内长URL横向撑开整行
- 移动端键盘弹出后输入框突然溢出
-
overflow-x: auto加在父容器上却没滚动条——因为子项根本没收缩，宽度没超限
必须显式覆盖min-width: auto
只写flex: 1或width: 100%不够，必须加min-width: 0来松开默认锁定。这不是可选项，是硬性前提。
推荐写法（兼顾兼容性与语义）：
.flex-item {
flex: 0 1 0; /* 不放大、可收缩、基准为0 */
min-width: 0;
}
注意点：
-
flex: 1等价于flex: 1 1 0%，第二个1虽表示可缩，但受min-width: auto压制，实际不生效 - 不要混用
width: 100%和flex规则，尤其在IE11或嵌套Flex中会冲突 - 若子项含图片或
textarea，需额外加max-width: 100%和box-sizing: border-box
遇到长单词/URL仍溢出？再加两行
min-width: 0解决了“收缩意愿”，但长无空格字符串（如https://example.com/very-long-path）还需触发换行：
.flex-item {
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
}
关键条件：
- 必须确保父Flex容器没有
white-space: nowrap - 不能只写
overflow-wrap: break-word——它只在“内容宽度 > 容器可用宽度”时才触发，而这个判断依赖min-width: 0已生效 - 避免用
fit-content或letter-spacing，它们会干扰宽度计算，叠加content-box时风险更高
检查是否被第三方样式覆盖
Ant Design、Bootstrap等UI库常重置box-sizing，但可能漏掉::before/::after伪元素，或用!important锁死min-width。
验证方法：
- 打开DevTools → Elements → 选中子项 → 切到Computed面板
- 搜索
min-width，确认最终计算值是0px，不是auto - 同理检查
box-sizing是否为border-box，尤其当子项有padding时
真实项目里，min-width: 0往往得写在比UI组件更具体的CSS选择器里，才能打赢样式权重战。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
