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

这个属于 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来解决这个问题。