通过为左侧 flex 项设置 width: min-content，并确保父容器使用 justify-content: flex-start，可使多行文本的左侧区块收缩至实际内容宽度，避免撑满剩余空间，从而让右侧区块紧随其后对齐。
通过为左侧 flex 项设置 `width: min-content`，并确保父容器使用 `justify-content: flex-start`，可使多行文本的左侧区块收缩至实际内容宽度，避免撑满剩余空间，从而让右侧区块紧随其后对齐。
在默认的 Flex 布局中，当 .left 元素内文本过长发生自动换行时，浏览器会将其视为一个“弹性项”，并依据 flex 的默认行为（flex-basis: auto + 内容尺寸）尽可能拉伸以填充可用空间——这导致左侧块宽度异常增大，挤压右侧块位置。要打破这一行为，关键在于显式限制左侧项的固有宽度。
解决方案是：
✅ 给 .left 添加 width: min-content —— 这会强制该元素宽度等于其内部最长一行（含空格断点）的自然宽度；
✅ 同时确保 .row 设置 justify-content: flex-start（虽为 flex 默认值，但显式声明更稳妥，避免继承干扰）；
❌ 不要使用 flex: 0 0 auto 单独控制（它仅影响弹性缩放，不解决换行后宽度膨胀问题）；
❌ 避免 white-space: nowrap（会禁用换行，违背多行需求）。
以下是修正后的完整样式代码：
.container {
background: lightgray;
width: 300px;
padding: 10px;
}
.row {
display: flex;
gap: 10px;
justify-content: flex-start; /* 显式声明，确保左对齐行为 */
}
.left {
background: lightyellow;
width: min-content; /* 核心：按最长行内容定宽，支持换行 */
/* 可选增强：防止极端窄宽破坏布局 */
min-width: fit-content;
}
.right {
background: lightskyblue;
}
⚠️ 注意事项：
- min-content 是 CSS Sizing Level 3 特性，在现代浏览器（Chrome 57+、Firefox 63+、Safari 14.1+、Edge 79+）中稳定支持；若需兼容旧版 Safari（
- 若左侧内容含内联元素（如 或图标），建议统一设置 vertical-align: top 避免基线对齐引发高度错位；
- gap 属性已广泛支持，无需额外前缀。
此方法保持语义清晰、响应友好，且完全基于标准 CSS，无需 JavaScript 干预，是解决“多行文本下 flex 项自适应收缩”问题的专业级实践方案。
