flex 布局 设置宽度后，被挤压的问题

出现被挤扁的情况，不能显示实际的宽度

 

解决方法：

有一个 flex-shrink 属性，可以解决元素被挤压的问题。

 

flex-shrink 属性指定了 flex 元素的收缩规则。

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

 

flex-shrink 的默认值为 1，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。

当给子盒子加上flex-shrink: 0，子盒子不会被压缩宽度；

flex-shrink: 0;

参考文档 https://blog.csdn.net/aaaaaaa1516682014292/article/details/128198561

flex-shrink: 0;