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

最新推荐文章于 2024-07-24 11:16:38 发布

Hzzzz_zzzzz

最新推荐文章于 2024-07-24 11:16:38 发布

阅读量8.5k

点赞数 13

本文链接：https://blog.csdn.net/Zoey_J/article/details/100983674

版权

当子元素设置超出不换行时，若子元素的宽度超出了父元素宽度（均分后），则会将父元素撑开，即 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>

在这里插入图片描述