display:flex布局下的子元素内容过多导致宽度被压缩问题

如果想要某个子元素宽度保持不变就设置

flex-shrink: 0;

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

定义和用法

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

注意：

如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。