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也在缩小/截断(我认为这与规格不符(。