flex布局和white-space: nowrap； 冲突解决

问题背景：
flex 布局下，想要设置文字不换行，并且超出部分省略号显示的效果。但是设置了 white-space: nowrap; 后，flex 布局宽度被影响了。

 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;

查资料得知，white-space: nowrap;和display:flex；是存在冲突的。在其他普通布局中，元素的min-width默认值为0，再flex弹性布局中，min-width默认值为0；而当元素设置white-space：nowrap，该元素宽度被撑开。

解决方式是：

给设置flex的元素设置min-width: 0;

一般来说应该解决了，但是 ，我设置了还是不起作用。。
于是发现，我的flex布局设置的flex 值为：
flex: 1 0 286px
而：
优先级：flex-basis > width > 内容宽度

• flex的默认值为 0 1 auto（不放大、缩小、默认auto元素自己宽度）

• flex: 1 表示：flex: 1 1 0%（第三个值flex-basis会默认添加单位）

• 使用flex-basis：width失效，前者优先级高（MDN）

• min-width 和 max-width 对flex-basis有效

虽然可以通过设置max-width或者min-width来限制元素的宽度，但我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。

所以！

给这个flex子元素设置width:0;

完美解决！

参考：
https://www.mulingyuer.com/archives/397/
https://juejin.cn/post/6844903993404047373