通过设置 width: min-content 并配合 justify-content: flex-start，可使 Flex 子项（如多行文本容器）按内容实际宽度收缩，避免撑满剩余空间，从而让右侧元素紧贴左侧内容末尾对齐。
通过设置 `width: min-content` 并配合 `justify-content: flex-start`，可使 flex 子项（如多行文本容器）按内容实际宽度收缩，避免撑满剩余空间，从而让右侧元素紧贴左侧内容末尾对齐。
在 Flex 布局中，当左侧元素包含长文本并发生自动换行时，默认情况下 .left 会继承父容器的剩余可用空间（即 flex-grow: 1 的隐式行为），导致其宽度被拉伸至尽可能宽，右侧元素被迫右移——这与单行时“文字有多宽、盒子就多宽”的紧凑表现不一致。
要实现多行文本下仍保持最小包裹宽度，关键在于显式覆盖默认的尺寸计算逻辑。解决方案如下：
✅ 核心 CSS 修改：
.row {
display: flex;
gap: 10px;
justify-content: flex-start; /* 确保子项左对齐，不分散或居中 */
}
.left {
background: lightyellow;
width: min-content; /* 关键！强制宽度等于内容最长一行的自然宽度 */
/* 可选增强：防止意外溢出 */
word-break: break-word;
hyphens: auto;
}
? 为什么 min-content 有效？
min-content 是 CSS 内置的宽度关键字，表示该元素在不换行前提下能容纳全部内容所需的最小宽度（即所有行中“最长单词或连续不可断字符串”的宽度）。对于多行文本，它取的是最长那一行的固有宽度，而非整块内容的总高度对应宽度。因此，即使文本折成三行，只要最长行是 "very2" 所在行，.left 就只会宽至刚好包裹该行。
⚠️ 注意事项：
- min-content 在所有现代浏览器中均受支持（Chrome 57+、Firefox 63+、Safari 14.1+、Edge 79+），但旧版 Safari 需加 -webkit-min-content 兼容前缀（如需支持 iOS
- 若文本中存在超长无空格字符串（如 Base64 或 URL），建议补充 word-break: break-all 或 overflow-wrap: break-word 防止横向溢出破坏布局。
- 不要同时设置 flex: 1 或 flex-grow: 1 到 .left，否则会覆盖 width: min-content 的效果。
? 进阶提示：
若需更精细控制（例如限制最大宽度 + 最小包裹），可组合使用：
.left {
width: min-content;
max-width: 200px; /* 防止极端长词过度拉伸 */
flex-shrink: 1; /* 允许必要时压缩 */
}
这样，无论文本单行还是多行，左侧区块始终“紧贴内容”，右侧元素自然紧跟其后，实现真正语义化的紧凑对齐。
