如何将div拆分为两等份且各自宽度互不挤占？

要让两个flex子项始终保持等宽，即使其中一个包含长文本，只需给左侧容器添加overflow: hidden属性，确保它严格遵守flex分配的空间，同时让内部的省略号样式生效。

修改后的HTML代码：

<div style="display: flex">
  <!-- Left -->
  <div style="background: yellow; flex: 1 0 0; overflow: hidden">
    <div class="ellipsis">
      VerylongtextVerylongtextVerylongtext
    </div>
  </div>
  <!-- Right -->
  <div style="background: red; flex: 1 0 0">
    Right
  </div>
</div>

CSS代码保持不变：

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

原理说明 #

• flex: 1 0 0已经设置两个子项的基础尺寸为0且可伸缩，但默认情况下flex子项会根据内容自动扩展，导致长文本撑开容器。
• 给左侧容器添加overflow: hidden后，它会被限制在flex分配的空间内，不再向外扩展；同时内部的.ellipsis元素因为父容器有明确空间限制，省略号样式能正常生效。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan