关于 white-space: nowrap； 影响 display: flex； 布局的问题

最近在改造公司项目的国际化的时候遇到了 white-space: nowrap; 影响了 display: flex; 布局的问题，现象是这样的：

 

左侧的文字可能很长，且设计师要求不能换行，超出的部分以省略号展示，而右侧的蓝色字长度是不定的，并且需要完整展示。

父元素设置 display: flex; 左侧子元素设置 white-space: nowrap; 并且设置超出为省略号，结果就如图所示，不仅左侧没有省略号展示，右侧还超出父元素展示了，左侧子元素并没有因为父元素设置了 flex 而被缩短。

先说解决办法：

给左侧子元素设置 min-width: 0; 即可，如下：

不仅超出部分可以省略号显示了，并且还可根据右侧子元素的宽度自适应。

为什么设置了 min-width: 0; 就可以？

查询MDN得知：在其他普通布局中，元素的 min-width 默认值为 0 ，而在 flex 弹性布局中， min-width 默认值为 auto ，

而当元素设置了 white-space: nowrap; 该元素宽度就被撑开了，

根据W3C上的一段话：

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).

翻译：默认情况下，flex项不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。

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