设置flex:1元素的子元素无法设置超出隐藏，flex: 1；width: 0；的原理

西西里______

已于 2022-09-23 10:41:26 修改

阅读量3.5k

点赞数 5

分类专栏： css 文章标签： css html css3

于 2022-01-12 20:49:44 首次发布

本文链接：https://blog.csdn.net/qq_31150171/article/details/122461592

版权

css 专栏收录该内容

3 篇文章

订阅专栏

参考：flex-grow - CSS（层叠样式表） | MDN

flex属性是flex-grow, flex-shrink 和 flex-basis的简写

flex:1 => flex:1 1 auto

假设：设置flex：1的项为A

所以，当A项的width为0时，剩余空间等于容器的宽度减去除A项以外（因为此时它的width为0），其他flex项的大小，然后把剩余空间给A项

补充：width也可以不设为0，只要设置的宽度不大于剩余空间就可以，因为此时的剩余空间为 flex 容器的宽度减去所有 flex 项的宽度加起来的大小，然后把剩余空间给A项

例子：可以自己调整item2的宽度到100px、150px看看效果

效果：

  <style>
    .flex{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border: 1px solid;
      width: 200px;
    }
    .item1{
      width: 100px;
      background-color: red;
      flex-shrink: 0;/* 不缩放 */
    }
    .item2{
      flex: 1;
      width: 0;
    }
    .ii{
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>

  <div class="flex">
    <div class="item1">今天吃什么</div>
    <div class="item2">
      <div class="ii">今天吃花菜炒肉、清炒大白菜、西红柿鸡蛋</div>
    </div>
  </div>