为什么带有white-space: nowrap子元素的flex项目无法正常收缩

原因解释 #

这个现象是flex布局的默认min-width: auto规则导致的：
flex项目默认的min-width属性值为auto，该规则限制了flex项目的实际宽度不能小于其内部内容的最小宽度。
你代码里的.long元素设置了white-space: nowrap，会让内部长文本不会换行，这段文本的不换行总宽度就是.item-2的最小宽度阈值。即便你给.item-2设置了flex-shrink: 1，也无法让它收缩到小于这个内容最小宽度的尺寸，所以就出现了没有按预期收缩的情况。

解决方案 #

只需要给.item-2显式设置min-width: 0，覆盖默认的auto值即可，修改后的CSS如下：

.item-2 {
  flex: 1 1 10000px;
  min-width: 0; /* 新增该配置 */
}

添加后flex-shrink的收缩规则就会正常生效，同时.long元素设置的溢出省略效果也能正常展示。

内容的提问来源于stack exchange，提问作者Jake Lin