Flex子元素宽度超出父容器主因是默认min-width: auto阻止收缩，必须显式设min-width: 0解锁flex-shrink，再配合overflow-wrap: break-word或text-overflow: ellipsis等控制内容呈现。
Flex 子元素宽度超出父容器，不是 flex-shrink 失效，而是它根本没机会生效——浏览器默认给每个 flex 项目加了 min-width: auto，强制它不能比内容更窄。只要内容（比如长 URL、无空格文本、图片）本身宽于父容器，flex-shrink: 1 就会被锁死。
为什么 flex-shrink 看起来不工作
你写了 flex: 1 或显式设置了 flex-shrink: 1，但子元素依然撑开父容器，横向滚动条出现，甚至破坏整行布局。这不是 bug，是规范行为：“A flex item cannot be smaller than the size of its content along the main axis.”
-
min-width: auto是 flex 项目的初始值，它会把内容固有宽度（intrinsic width）当作最小底线 - 哪怕你设了
flex-basis: 0或width: 0，只要没覆盖min-width，收缩就卡住 -
overflow: hidden单独加在子项上也无效——因为元素物理宽度已经超出了父容器，裁剪区域还没建立
必须加 min-width: 0 才能让 flex-shrink 生效
这是最关键的一步，不是可选项。只有显式重置 min-width，浏览器才允许 flex 项目压缩到小于内容宽度，flex-shrink 才真正参与计算。
- 水平布局（
flex-direction: row）：加min-width: 0 - 垂直布局（
flex-direction: column）：加min-height: 0 - 配合
flex: 1或flex: 1 1 0使用，确保flex-basis不是auto - 若子元素含长单词或 URL，还需补
overflow-wrap: break-word或word-break: break-all，否则换行不会触发
示例：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; width: 300px; }
.item { flex: 1; min-width: 0; overflow-wrap: break-word; }
overflow: hidden + text-overflow: ellipsis 需要三件套
如果目标是截断文本而非换行，只靠 overflow: hidden 不够。省略号（text-overflow: ellipsis）有严格前提：
- 元素必须是块级或 inline-block，且设了明确宽度（或由 flex 分配）
- 必须同时设置
white-space: nowrap - 必须设置
overflow: hidden - 仍需
min-width: 0，否则 flex 项不收缩，white-space: nowrap会直接溢出
缺一不可，漏掉 min-width: 0 是移动端最常踩的坑。
别让固定尺寸覆盖 flex 行为
如果你在 flex 子项上同时写了 width: 200px 或 height: 100%，那 flex: 1 和 min-width: 0 都可能失效：
-
width/height的优先级高于flex-basis，会压制伸缩逻辑 -
height: 100%在 flex column 场景中容易和min-height: 0冲突 - 想保留弹性又控尺寸？改用
max-width或flex-basis配合flex-shrink
复杂点在于：min-width: 0 不是万能胶，它只是解开了 flex-shrink 的枷锁；后续怎么处理溢出内容（换行？截断？滚动？），得根据实际 UI 需求再选一层策略。
