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

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

在你的代码中，.parent 设置了 display: flex，其两个子

默认成为 flex 项目（flex items）。虽然 .left 显式声明了 width: 15%，但 在 Flexbox 布局中，width 仅作为初始主轴尺寸参考，实际尺寸受 flex-basis、flex-grow 和 flex-shrink 共同控制。

关键点在于：
✅ 所有 flex 项目默认拥有 flex-shrink: 1（即允许收缩）；
✅ 右侧

内含长文本

，其内容自然宽度远超剩余空间，触发 flex 容器的“空间再分配”机制；
❌ 此时，浏览器会按比例压缩所有可收缩项（包括 .left）以腾出空间，导致 .left 实际宽度小于 15% —— 这并非 bug，而是 Flexbox 的标准弹性行为。

✅ 正确解决方案

.left {
  width: 15%;
  flex-shrink: 0; /* 禁止收缩，强制保持最小 15% 宽度 */
}

? 补充说明：flex-shrink: 0 比 min-width: 15% 更精准。后者仅设下限，若父容器极窄，仍可能因其他约束失效；而 flex-shrink: 0 直接禁用收缩逻辑，确保 .left 始终按 width 或 flex-basis 占据预期空间。

? 最佳实践建议

• 在 flex 布局中，避免仅依赖 width 控制子项尺寸，应显式设置 flex-shrink 或使用 flex 简写（如 flex: 0 0 15% → flex-grow: 0, flex-shrink: 0, flex-basis: 15%）；
• 若需响应式适配，可结合 min-width + flex-shrink: 0 双重保障；
• 使用浏览器开发者工具检查 computed styles，重点关注 flex-shrink 和 flex-basis 实际值，快速定位收缩根源。

通过理解 Flexbox 的默认收缩机制，你就能精准掌控布局行为，告别“宽度莫名变小”的困惑。