如何将div分成两部分并且每一部分都不会给出宽度？

Question

我的目标是将一个 div 分成两个相等的部分。

问题在于，当一个部分需要更宽的宽度时，另一部分就会屈服。

注：

1. 特意用

   VerylongtextVerylongtextVerylongtext

   包裹

   <div>

   以模拟由按钮包裹。

stackblitz：https://jsfiddle.net/j7wd4x3k/

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

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

Answer 1

删除 CSS 中的

flex: 1 0 0

并替换为

width: 50%;

- 这样应该可以解决问题:)