flex:1时，父元素宽度被子元素撑开

当子元素设置超出不换行时，若子元素的宽度超出了父元素宽度（均分后），则会将父元素撑开，即 flex:1 失效

<div style="width: 100%; display: flex;">
  <div style="background-color: orange; flex: 1;">
    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素</p>
  </div>
  <div style="background-color: darkcyan; flex:1;">
    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">ziyuansu</p>
  </div>
</div>

给子元素加上 width: 0 便可解决：

<div style="width: 100%; display: flex;">
  <div style="width: 0; background-color: orange; flex: 1;">    <!-- 给子元素加上 width: 0 -->
    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">子元素</p>
  </div>
  <div style="width: 0; background-color: darkcyan; flex:1;">    <!-- 给子元素加上 width: 0 -->
    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">ziyuansu</p>
  </div>
</div>