本文讲解如何使用 flexbox 正确将容器均分为两部分，确保左右区域严格各占 50% 宽度，不因内容长度差异而发生宽度侵占，尤其适用于含长文本截断（ellipsis）的按钮或卡片布局。
本文讲解如何使用 flexbox 正确将容器均分为两部分，确保左右区域严格各占 50% 宽度，不因内容长度差异而发生宽度侵占，尤其适用于含长文本截断（ellipsis）的按钮或卡片布局。
在 Flexbox 布局中，仅依赖 flex: 1 或 flex: 1 0 0 并不能保证子元素严格等宽——因为当某子项内容过长（如连续无空格的长字符串），其最小内容宽度（min-content）会触发 flex 项目的默认 min-width: auto 行为，导致另一侧被压缩，破坏等分效果。
根本原因在于：flex-shrink 默认生效，但浏览器会阻止元素收缩至小于其内部内容的固有最小宽度（即“content-based minimum size”）。即使设置了 flex-basis: 0，若未显式限制最小宽度，长文本仍会撑开左侧区域。
✅ 正确解法是显式控制尺寸基准与边界，推荐组合使用：
-
flex-basis: 50%：设定主轴初始大小为父容器的 50%； -
max-width: 50%：防止内容溢出导致实际宽度超过一半； -
min-width: 0：关键！ 覆盖默认的min-width: auto，允许 flex 项收缩至 0（从而尊重flex-basis和max-width）； - 对需截断的文本容器额外应用
overflow: hidden; text-overflow: ellipsis; white-space: nowrap。
以下是完整、健壮的实现示例：
<div style="display: flex; width: 100%; border: 1px solid #ccc;">
<!-- Left: 长文本区域，强制等宽 + 截断 -->
<div style="
background: #ffeb3b;
flex-basis: 50%;
max-width: 50%;
min-width: 0;
display: flex;
align-items: center;
padding: 8px;
">
<div style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
">
VerylongtextVerylongtextVerylongtext
</div>
</div>
<!-- Right: 短文本区域，同样严格约束 -->
<div style="
background: #f44336;
flex-basis: 50%;
max-width: 50%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
">
Right
</div>
</div>? 注意事项：
- ❌ 避免在 flex 项上直接设
width（如width: 50%），它会与 flex 计算逻辑冲突； - ✅ 必须设置
min-width: 0（或min-width: 0px），这是实现可靠收缩的核心； - ✅ 若子元素内嵌块级结构（如按钮、图标+文字），建议在其内部也添加
width: 100%和min-width: 0，确保继承链可控； - ? 替代方案：使用 CSS Grid（
grid-template-columns: 1fr 1fr）亦可天然规避此问题，但需兼顾浏览器兼容性。
总结：Flexbox 的等分布局不是“设了 flex: 1 就万事大吉”，而是需协同 flex-basis、max-width 与 min-width: 0 三者，才能真正实现内容无关的、像素级可控的均分效果。
