最近遇到 flex 子元素超出父元素的宽度，本想着复制粘贴就算了，但蛮多次遇到在 flex 元素内定义 width 的场景了，这回就不躺平了吧~

场景一：文本超出省略

很常见的业务场景，比如一段图文描述中，标题做超长处理

超长时，可能会出现

<style>
  .flex-box {
    margin: 100px auto;
    width: 200px;
    display: flex;
    border: 1px solid red;
    column-gap: 10px;
    background: #7c4dff;
  }

  .flex-container {
    display: flex;
    column-gap: 10px;
    background: #0a9caf;
    color: #fff;
  }

  .flex-ellipsis {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
</style>

<div class="flex-box">
  <div style="white-space: nowrap;">avatar</div>

  <div class="flex-container">
    <div style="flex-shrink: 0">描述 </div>
    <div class="flex-ellipsis">这是一段长描述 这是一段长描述 </div>
  </div>
</div>

这里看出 flex-container 宽度超过了 flex-box，如何解决也很简单，看看网上给的方案：

  .flex-container {
+   flex: 1;
+   width: 0;
// 或者
+   min-width: 0;
+   overflow: hidden; 
  }

flex: 1; => flex:1 1 auto => flex-grow: 1; flex-shrink: 1; flex-basis: auto;
看下 MDN 的 flex-grow 的对剩余空间的解释

再看 flex-basis: auto；

结论

如果 flex 元素没有设置尺寸（width、min-width …）时，flex 元素的内容尺寸超过平均分配的剩余空间时，则此时的宽度即为内容尺寸（当前元素大小 = max-content）。如果设置了尺寸并且尺寸小于可用的平均分配的剩余空间时，则元素尺寸为该空间大小。
当 flex: 1; 时，相当于 剩余空间大小 = 父元素（容器）的宽度
则 剩余空间的大小 = 父元素的宽度 / 元素的个数
即 直接设置 width: 0 可以保证元素宽度平方父元素的宽度

https://segmentfault.com/q/1010000014919583
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex