css - css flexBox 中的文本溢出只需添加宽度 :0, 即可解决，但为什么呢？

Question

.textEllipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

.wrapper{
  display: flex;
  width: 500px;
  padding: 10px;
  background: green;
}

.wrapper .main,.sub{
  padding: 10px;
}

.wrapper .main{
    flex: 1;
    background: red;
}

.wrapper .main.widthConfig{
  width: 0;
}

.wrapper .sub{
  width: 100px;
  flex-shrink: 0;
  background: blue;
  color: #fff;
}

<h3>right behavior</h3>
<div class="wrapper">
  <div class="main widthConfig">
    <div class="inner textEllipsis">
adfadfafasfafasdfasdfasdfasfafasdfasdfasdfasfafasdfasdfasdfasfafasdfasdfasdfasfafasdfasdfasdfasf
    </div>
  </div>
  <div class="sub">
    aaaaaaaaaaa
  </div>
</div>
<h3>remove width: 0 get wrong behavior</h3>

<div class="wrapper">
  <div class="main">
    <div class="inner textEllipsis">
adfadfafasfafasdfasdfasdfasfafasdfasdfasdfasfafasdfasdfasdfasfafasdfasdfasdfasfafasdfasdfasdfasf
    </div>
  </div>
  <div class="sub">
    aaaaaaaaaaa
  </div>
</div>

在代码片段中，我使用 .wrapper 创建了一个 flexBox 布局元素。 我添加flex:1到.main元素，添加固定宽度，如 width: 100px到子元素。 在 .main 的子元素中元素我添加一些长文本然后 .main 的宽度元素失控。

但是当我添加width: 0时到.main元素一切都向右转。 谁能告诉我为什么吗？

Answer 1

在 Flex 子项上设置 min-width: 0;

或者将 min-width 设置为某个实际值。
如果没有这个，包含其他文本元素的 Flex 子元素将不会缩小到超过这些文本元素的“隐含宽度”。

根据草案规范，当 flex 容器缩小时，上述文本不应完全折叠。因为字幕的宽度为 100%，所以 flex-box 进行的 min-width: auto 计算表明它的容器应该比我们想要的要大。

此行为在 Chrome、Opera 和 Firefox 中是一致的。即使没有 min-width(我认为这违反了规范)，Safari 也会缩小/截断。