使用 width: 0 避免 flex: 1 元素宽度溢出

参考

解决用flex布局时内容可能溢出的问题

背景

使用 flex 布局, 左右两边各一个元素, 中间 flex: 1, 中间结构为: 二行文字, 第一行不换行超长隐藏, 第二个最多支持换两行超长隐藏;
结果设置文字不换行后, 中间元素溢出 flex: 1 范围

解决

上述参考文章, 有两种方案:

1. 中间元素 overflow: hidden
   但是这样会导致第二行文字不能"最多支持换两行";
2. 中间元素 width: 0
   成功解决