flex子项溢出主因是默认min-width:auto阻止收缩，应设min-width:0并配合overflow-wrap:break-word等文本换行控制，优先用flex:1而非固定宽。
子元素在 Flex 布局中宽度溢出容器，常见于内容过长（如长单词、URL、未换行文本）或子项设置了固定宽/最小宽但父容器空间不足时。单纯靠 flex-shrink: 1 不一定生效，关键要配合 min-width 控制收缩下限，并确保文本可折行。
设置子元素 min-width: 0（打破 flex 项默认最小宽度限制）
Flex 子项默认有 min-width: auto，浏览器会阻止其收缩到内容最小尺寸以下（比如一个超长 URL 就算容器很窄也不折行、不缩小）。这是溢出主因。
- 显式设
min-width: 0（或min-width: min-content）才能让flex-shrink真正起作用 - 适用于文字容器、卡片、按钮组等所有可能溢出的 flex 子项
- 示例：.item { flex: 1; min-width: 0; }
搭配 word-break 或 overflow-wrap 处理长不可断文本
即使 min-width: 0 + flex-shrink 生效，纯英文/数字长串（如 https://example.com/very-long-path-with-no-hyphens）仍不会自动换行，需额外控制文本流。
- 推荐用
overflow-wrap: break-word：仅在必要时（单词太长撑不开）才折行，语义更自然 - 或
word-break: break-all：粗暴打断任意位置，适合日志、代码等场景 - 避免只用
white-space: normal（它默认已启用，但对长无空格字符串无效）
慎用 flex-basis 和固定 width，优先用 flex-grow/shrink 组合
给子项设 width: 200px 或 flex-basis: 200px 会干扰弹性行为，尤其在小屏下易强制溢出。
立即学习“前端免费学习笔记（深入）”；
- 想“尽量占满但可收缩”：用
flex: 1（即flex: 1 1 0），隐式设flex-basis: 0，收缩更彻底 - 想“有基础宽度但允许压缩”：用
flex: 1 1 auto+min-width: 0，兼顾内容和响应性 - 避免
flex: 0 1 200px这类写法——flex-basis过大会卡死收缩起点
检查父容器是否启用了 flex-wrap 和正确 flex-direction
有时溢出不是子项问题，而是父容器没按预期排列：
- 横向空间不足时，加
flex-wrap: wrap允许子项换行，比硬挤更合理 - 确认
flex-direction是row（默认）而非column，否则width行为逻辑不同 - 父容器自身宽度是否被限制？比如外层
max-width或width未随视口变化
