本文讲解如何使用 Flexbox 正确将父容器均分为两个严格等宽的子区域，避免因内容过长导致一方压缩另一方；核心在于合理设置 flex-basis 与 max-width，而非依赖 width 或默认 flex-shrink 行为。
本文讲解如何使用 flexbox 正确将父容器均分为两个严格等宽的子区域，避免因内容过长导致一方压缩另一方；核心在于合理设置 `flex-basis` 与 `max-width`，而非依赖 `width` 或默认 `flex-shrink` 行为。
在 Flexbox 布局中，简单使用 flex: 1（即 flex: 1 1 0）看似能均分空间，但实际会触发默认的 flex-shrink: 1 行为——当容器空间不足时，浏览器会强制压缩子项（即使内容已溢出），导致右侧元素被左侧长文本“挤占”。这正是示例中 Verylongtext... 破坏等宽布局的根本原因。
要实现真正互不干扰的等宽分割，关键在于切断弹性收缩链：
✅ 正确做法：显式设定 flex-basis: 50%（定义主轴初始尺寸），并配合 max-width: 50%（硬性限制最大宽度），同时禁用收缩（flex-shrink: 0）：
<div style="display: flex;">
<!-- 左侧：严格限定为 50% 宽度，不收缩 -->
<div style="
background: yellow;
flex: 0 0 50%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 50% */
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
">
VerylongtextVerylongtextVerylongtext
</div>
<!-- 右侧：同理，独立控制 -->
<div style="
background: red;
flex: 0 0 50%;
max-width: 50%;
">
Right
</div>
</div>
⚠️ 注意事项：
- 避免使用
width: 50%：在 Flex 容器中，width会被flex-basis覆盖，且无法阻止flex-shrink的副作用； -
flex: 1 0 0❌ 不足：它虽禁用了收缩（flex-shrink: 0），但flex-basis: 0会让浏览器按剩余空间比例分配，而非按百分比均分； - 文本截断需作用于直接子元素：
.ellipsis类应加在<div> 内部文本容器上（或如示例中直接写在子 <code>div上），确保overflow生效； - 若需响应式适配，可将
50%替换为min(50%, calc(100vw - 40px))等动态值，但flex-basis + max-width组合仍是基础保障。
总结：Flexbox 的“等分”不是魔法，而是精确控制 flex-basis（基准尺寸）、flex-shrink（是否让步）和 max-width（物理上限）三者的协同结果。坚持“基准设百分比、收缩关掉、上限锁死”，即可稳定实现内容无关的等宽布局。
