css：flex布局子元素宽度被压缩问题

问题

如题，父元素设置 flex 布局后，子元素如果超出长度则会被压缩，如图：

解决

子元素设置 flex-shrink: 0;，默认值为 1

介绍 flex-shrink 属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。