本文讲解如何利用 Flexbox 的 flex-basis 与 max-width 组合，强制将父容器均分为两个互不侵占宽度的子区域，避免内容过长导致另一侧被压缩，同时确保文本溢出时正确显示省略号。
本文讲解如何利用 flexbox 的 `flex-basis` 与 `max-width` 组合，强制将父容器均分为两个互不侵占宽度的子区域，避免内容过长导致另一侧被压缩，同时确保文本溢出时正确显示省略号。
在使用 Flexbox 布局进行等分（如左右两栏）时，一个常见误区是依赖 flex: 1 或 flex: 1 0 0 实现“均分”。虽然该写法在多数场景下可行，但当一侧内容具有不可压缩的最小固有宽度（例如长单词、内联块级元素或未换行文本）时，Flex 项会因 min-width: auto 默认行为而拒绝收缩——导致另一侧被强行挤压，破坏等分预期。
根本原因在于：Flex 项的默认最小尺寸限制（min-width: auto）优先级高于 flex-basis，因此即使设置了 flex-basis: 0，浏览器仍会按内容自然宽度设定下限，使 flex-grow 失效于“压缩”阶段。
✅ 正确解法是显式解除最小宽度限制 + 精确控制基础尺寸：
- 使用
flex-basis: 50%指定理想基准宽度； - 配合
max-width: 50%防止其在flex-grow下过度扩张； -
关键一步：添加
min-width: 0（或min-width: auto在特定上下文中不适用时），主动覆盖默认的min-width: auto，允许内容溢出时正常裁剪。
以下是推荐的稳健实现：
<div style="display: flex;">
<!-- 左侧：长文本需截断 -->
<div style="background: #ffeb3b; flex-basis: 50%; max-width: 50%; min-width: 0; display: flex; align-items: center;">
<div class="ellipsis">
VerylongtextVerylongtextVerylongtext
</div>
</div>
<!-- 右侧：固定短文本 -->
<div style="background: #f44336; flex-basis: 50%; max-width: 50%; min-width: 0; display: flex; align-items: center; justify-content: center;">
Right
</div>
</div>
<style>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 12px; /* 可选：增加可读性边距 */
}
</style>⚠️ 注意事项：
- 不要使用
width: 50%替代flex-basis—— 它会破坏 Flex 的弹性计算逻辑，尤其在响应式或嵌套场景中易引发布局错乱； - 若子元素本身是
display: inline-block或含white-space: nowrap，务必在其父 Flex 项上设置min-width: 0，否则ellipsis无效； - 在现代项目中，建议将样式抽离为 CSS 类而非内联，提升可维护性与复用性；
- 如需支持 IE10+，注意
flex-basis的兼容写法（如-ms-flex-preferred-size: 50%），但min-width: 0在 IE 中同样关键。
总结：实现真正“互不侵扰”的等分 Flex 布局，核心在于理解 min-width: auto 的隐式约束，并通过 flex-basis + max-width + min-width: 0 三者协同，既保障尺寸基准，又开放收缩权限，最终让 text-overflow: ellipsis 等文本控制策略稳定生效。
