本文详解如何利用 Flexbox 的 flex-basis 与 max-width 组合，强制将父容器均分为两个不因内容长度差异而失衡的子区域，特别适用于带文本截断（ellipsis）的按钮式布局。

本文详解如何利用 flexbox 的 `flex-basis` 与 `max-width` 组合，强制将父容器均分为两个不因内容长度差异而失衡的子区域，特别适用于带文本截断（ellipsis）的按钮式布局。

在使用 Flexbox 布局将一个 <div> 拆分为两等份时，开发者常误用 <code>flex: 1（即 flex: 1 1 0），期望实现“平均分配”。但实际中，当一侧内容过长（如超长无空格文本），即使设置了 text-overflow: ellipsis，其父容器仍可能被内容最小宽度（min-content）撑开，导致另一侧被压缩——这是因为默认情况下，Flex 项的 flex-shrink 虽启用，但不会收缩至低于其内部内容的固有最小宽度（即 min-width: auto 行为）。

✅ 正确解法是显式约束基础尺寸与最大容许宽度，而非依赖弹性收缩：

<div style="display: flex;">
  <!-- 左侧：强约束为 50% 宽度，禁止溢出 -->
  <div style="
    background: #ffeb3b;
    flex-basis: 50%;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  ">
    VerylongtextVerylongtextVerylongtext
  </div>
  <!-- 右侧：同理约束 -->
  <div style="
    background: #f44336;
    flex-basis: 50%;
    max-width: 50%;
  ">
    Right
  </div>
</div>

? 关键要点解析：

• flex-basis: 50% 设定主轴上的初始大小（替代 width，更符合 Flexbox 语义）；
• max-width: 50% 是核心防线：即使内容试图撑开，也绝不允许超过半宽；
• 移除 flex-shrink: 0 或 flex-grow: 0 并非必须，但需确保不依赖 flex: 1 的自动伸缩逻辑；
• 文本截断样式（overflow, text-overflow, white-space）应直接作用于内容容器，而非嵌套的额外 <div>（原示例中 <code>.ellipsis 包裹层冗余，可精简结构）。

  ⚠️ 注意事项：

  • 若父容器宽度不固定（如响应式场景），建议配合 box-sizing: border-box 和相对单位（如 %, vw）使用；
  • 避免同时设置 width 和 flex-basis —— 二者冲突时 flex-basis 优先，但混用易引发维护困惑；
  • 在 Safari 等旧版浏览器中，需验证 flex-basis: 50% 兼容性（现代浏览器均支持良好）。

  总结：Flexbox 的“均分”不是魔法，而是精确控制 flex-basis + max-width + overflow 的协同结果。抛弃对 flex: 1 的惯性依赖，转而用确定性约束替代弹性博弈，才能真正实现稳定、可控的双栏等宽布局。