flex子元素长文本撑破容器时，需在子元素上设word-break: break-all和overflow-wrap: break-word，并配合width/max-width及min-width: 0以允许压缩换行。
flex 子元素文本撑破容器的典型表现
当 display: flex 容器里放了长单词、URL 或连续无空格字符串（比如 aaaaaaaaaaaaaaaaaaaa），即使设了 width: 200px，子元素仍会强行拉伸容器宽度，破坏布局。这不是 flex 的 bug，而是 CSS 默认对不可折行内容的处理逻辑——它优先保障内容完整显示，而非遵守尺寸约束。
用 word-break 和 overflow-wrap 强制换行
关键不是改 flex 属性，而是控制子元素内部文本的换行行为。需在子元素上同时设置：
-
word-break: break-word（旧写法，兼容性好）或更推荐的word-break: break-all -
overflow-wrap: break-word（现代标准，对长单词更友好） - 必须搭配
width或max-width才生效，否则没有“换行边界” - 如果子元素是
div，默认white-space: normal已允许空格换行，但对无空格串无效
div.flex-container {
display: flex;
}
div.flex-item {
width: 200px;
word-break: break-all;
overflow-wrap: break-word;
}flex 本身也要配合收缩行为
仅靠文本换行还不够：如果子元素是图片、输入框或设置了 flex-shrink: 0，它仍会拒绝压缩。此时要检查：
- 子元素是否意外写了
flex-shrink: 0？去掉或改为flex-shrink: 1 - 是否用了
min-width: auto（Flexbox 默认值）？可显式设min-width: 0允许压缩到内容最小宽度 - 图片需加
max-width: 100%，否则无视父容器限制
div.flex-item {
min-width: 0; /* 关键：允许 flex item 压缩到文字换行后的实际宽度 */
word-break: break-all;
overflow-wrap: break-word;
}遇到 textarea 或 input 怎么办
表单控件有自身渲染逻辑，word-break 对它们无效。解决方案分场景：
立即学习“前端免费学习笔记（深入）”；
-
input[type="text"]：无法自动换行，只能靠width+overflow: hidden截断，或换用textarea -
textarea：默认支持换行，但需加resize: none防止用户拖大，再用width和max-width约束 - 若必须让 input 显示长 URL 并折行，只能用
contenteditable="true"的 div 替代
最稳妥的做法是：只要内容可能超长，就别用 input，改用带 white-space: pre-wrap 的 div 模拟输入区。
