当父容器使用 display: flex 时，即使为子元素设置了固定百分比宽度（如 width: 15%），它仍可能因内容挤压而收缩——这是 Flexbox 默认的弹性行为所致，根本原因在于 flex-shrink: 1 的默认值。

当父容器使用 `display: flex` 时，即使为子元素设置了固定百分比宽度（如 `width: 15%`），它仍可能因内容挤压而收缩——这是 flexbox 默认的弹性行为所致，根本原因在于 `flex-shrink: 1` 的默认值。

在 Flex 布局中，所有直接子元素默认具有 flex-shrink: 1，这意味着当容器空间不足时，它们会主动缩小自身以适应布局。你遇到的现象正是典型表现：右侧

内含长文本

，换行后其内在最小宽度（min-content）变大，导致整个 flex 容器在有限宽度下发生“空间争夺”。此时左侧 .left 虽声明 width: 15%，但因 flex-shrink: 1 生效，被迫压缩以腾出空间给右侧内容，最终视觉上窄于预期。

✅ 正确解法不是简单改用 min-width: 15%（这仅设下限，不保证初始尺寸），而是显式控制 Flex 缩放行为：

.left {
  width: 15%;
  flex-shrink: 0; /* 关键：禁止收缩 */
}

同时建议补充 flex-basis 明确基准尺寸，使语义更清晰：

.left {
  flex: 0 0 15%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 15% */
}

⚠️ 注意事项：

• width 在 Flex 子元素上仅作为 flex-basis 的初始参考值，真正起效的是 flex 简写或 flex-basis；
• 若右侧内容极长且无换行约束（如超长英文单词），可额外添加 word-break: break-word 或 overflow-wrap: break-word 防止溢出；
• 避免混合使用 width 和 flex 属性造成歧义，优先使用标准 Flex 属性（flex, flex-basis, flex-shrink）进行精确控制。

总结：Flex 布局中，“设置 width ≠ 实际渲染宽度” 是设计特性而非 bug。理解 flex-shrink 的默认行为，并主动设为 0 来锁定尺寸，是解决此类宽度异常的核心思路。