flex内容溢出

参考资料：

Flex Basis与Width的区别【CSS】flex-basis 文本溢出问题

flex溢出的根本原因是 flex-basis

解决方式：

设置width属性，一般设置为width: 0min-width来限制， 一般也是min-width: 0;设置overflow:hidden

为什么？

设置width属性，只要width小于剩余空间即可，一般设置为width: 0;这样可百分之百确定小于剩余空间； 不设置width但用min-width来限制也是一样的，既然 flex 项 的min-width:auto，那我们也设置一个小于剩余空间的值，一般也是min-width: 0; 设置overflow:hidden来限制溢出效果也是一致的。

以下部分是摘自上述两篇参考资料 详细解释 Flex Basis与Width

Flex Basis与Width的区别

width属性只是一个当flex-basis没有被设置时的回退选项。min-width和max-width则是flex-basis的下限和上限

flex-basis 的作用

flex: auto实际上是三个属性的集合： flex-grow: 1; flex-shrink: 1; flex-basis: auto;

flex-grow表示放大比例，flex-shrink表示收缩比例，flex-basis表示分配多余空间前，项目占据的主轴空间。

当我们没有给flex-basis元素设置width时，flex-basis: auto由内部的content决定宽度，且受max/min-width限制。 如此一来，在内部content自由的情况下，那么flex-basis元素的宽度就看max/min-width了。