掘金文章归档 · 第 86 篇 CSS 布局 8/9

flex: 1; 子元素撑破盒子解决方案

flex 子项默认最小尺寸会撑开容器，overflow: hidden / min-width: 0 一键修复

原文作者：随意_（掘金） | juejin.cn/post/7366939722872815642 | 标签：前端

0背景

做一行溢出 ... 展示的时候，flex:1 会撑破盒子，造成溢出 ... 无法正确展示。解决方式是 flex:1 元素加上 overflow: hidden。

1标准盒子溢出无此问题

代码及展示如下：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 500px;
      border: 1px solid red;
    }

    .ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="ellipsis">我是测试的文字我是测试的文字我是测试的文字我是测试的文字我是测试的文字</div>
  </div>
</body>

2包含一层 flex:1 元素，无法正确溢出

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 500px;
      border: 1px solid red;
      display: flex;
    }

    .item1 {
      flex: 1;
    }

    .ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="item1">
      <div class="ellipsis">我是测试的文字我是测试的文字我是测试的文字我是测试的文字我是测试的文字</div>
    </div>
  </div>
</body>
⚠️ 为什么？flex 子项默认 min-width: auto，即最小宽度不小于内容宽度，长文本会把 flex:1 的盒子撑破。

3解决方式

flex:1 增加 overflow: hidden：

.item1 {
  flex: 1;
  overflow: hidden;
}

可正常溢出。

4补充：父元素需要滚动时

如果父元素需要滚动，无法设置 overflow: hidden，则设置 width: 0 或者 min-width: 0 同样可以达到效果。

方案适用场景
overflow: hidden父元素无需滚动时首选
width: 0父元素需要滚动，允许子元素收缩
min-width: 0标准做法，重置 flex 默认最小宽度