为什么这里的flex:1;加width: 0;可以避免把前面的元素空间挤没?

Question

    <div style="width: 350px;display: flex;">
        <div style="width: 50px;height: 50px;background-color: blanchedalmond;">
            <!-- 后面div加width: 0才显示 -->
        </div>
        <div style="flex:1;width: 0;white-space: nowrap;">
            <div>css3 flex布局，文字超出.css3 flex布局，文字超出.
                css3 flex布局，文字超出.</div>
        </div>
    </div>

Answer 1

这个属于 Flex 布局的计算规则，当设置一个元素的display属性为flex之后，那么则该元素为弹性容器，其根子元素为弹性子元素。

而计算布局就是需要参考子元素来进行，默认情况下就像楼上的老哥说的，min-width和min-height都是auto，这个时候你为其中一个元素设置width属性之后，另外一个元素不设置，结果就是因为弹性布局，设置了width属性的元素因为min-width是auto，在一些特殊的情况下是有可收缩的空间的，就例如弹性盒子，结果就是你代码的示例，第一个元素挤没了。

而你对第二个元素设置了width结果就不一样了，因为弹性盒子会计算所有的子元素的宽度，在你第二个元素没有设置width的时候，width的值就是auto，需要注意的是这里的auto对于不同的元素，auto的结果也是不一样的。

对于块级元素，aotu指的是充分利用可用空间，也就是fill-available，也就是父元素的 100%。

对于内联元素，aotu指的是收缩至合适，也就是shrink-to-fit，例如inline-block。

当然还有其他的，这里就不多介绍了，感兴趣可以看看：stretch-fit-sizing

根据这些规则再回到问题上，没有设置width的元素的值是auto，通过拉伸规则就应该是父元素的 100%，而又因为是弹性盒子的原因，第一个元素虽然设置了width，但是还是可以进行收窄，于是就挤没了。

根据规范，这些拉伸规则还是会遵守min-width、max-width等属性的，所以你这个时候将第一个元素的width修改为min-width也是不会被挤没的。

再谈到第二个元素的width设置为0为什么也是可以的，这是因为你对第二个元素设置了flex:1，这个时候会自动扩充这个元素的大小（这个知识点我这里就不多说了，你既然用到了应该知道是干嘛用的），这个时候经过计算，他只会分配剩余空间，所以不会对第一个元素造成影响。

虽然上面你写的，或者是我说的min-width都是是一种解决方案，但是你在使用flex布局，这里建议是直接给第一个元素设置flex-shrink: 0来解决这个问题。

Answer 2

前面的元素空间被挤没的原因是：

因为设置了 white-space: nowrap; 又因为在 flex 弹性布局中， min-width 默认值是 auto ，所以元素 content 没法收缩了，设置 min-width: 0; 后就有了固定尺寸就可以展示前面的元素了。

Answer 3

width: 0将由flex布局自动计算宽度，和预期效果一致。一般情况下子元素内容超过了flex:1时，会自动撑开，也就是把其它元素“挤没”