问题

在写一个超出宽度省略的小功能时遇到一个奇怪的问题，flex子元素会突破包裹元素的宽度：

代码大概长这个样子：

ts
<template>
  <div class="wrapper">
    <span class="title">标题：</span>
    <div class="content-wrapper">
      <div class="content">exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample</div>
    </div>
  </div>
</template>
<style scoped>
.wrapper {
  display: flex;
  background-color: pink;
  width: 500px;
}
.title {
  flex-shrink: 0;
}
.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.content-wrapper {
  flex-shrink: 1;
  flex-basis: 0;
}
</style>

可见，最外层元素设置了width: 500px，flex 子元素在超出范围后并没有收缩，即使设置了flex-shrink: 1和flex-basis: 0也没有用。就是说，我得要.content-wrapper这个元素正常的放缩。

解决

这里搜了一下，得到了很多有用的回答：flex布局子元素宽度超出父元素问题、如何解决flex文本溢出问题、Why don’t flex items shrink past content size?。

我们可以看文档，flex 子元素作为滚动容器（scrolling container）的时候，它的默认最小宽高会被设置为 0，是非滚动容器则为内容区域大小。

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

非滚动容器，相当于设置了min-width: auto和min-height: auto。而滚动容器则是min-width: 0和min-height: 0。

那什么是滚动容器，具体可以继续看文档。简单来说，overflow是auto、hidden、scroll的是滚动容器，而none和clip则不是。

那么，解决这个问题可以把overflow设置为auto、hidden、scroll这三个值之一。另外，我们可以注意到，问题出现的关键在于 flex 子元素最小宽高的默认值，这样子，我们也可以直接设置最小宽度为 0 解决这个问题。

css
.content-wrapper {
  overflow: auto;
}

或者

css
.content-wrapper {
  min-width: 0;
}

最终效果：

结语

当 flex 子元素是非滚动容器时，它默认的最小宽高是内容宽高，而是非滚动容器则为 0。flex 子元素是非滚动容器是引起 flex 子元素溢出问题的原因，可以通过将overflow设置为auto、hidden、scroll或者把min-width设置为 0 解决这个问题。

感觉 CSS 规则好复杂鸭，这种问题也只有踩到坑才会发现。