Flex弹性布局元素被挤压变扁问题

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

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

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

flex-shrink 的默认值为 1，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。
当给子盒子加上flex-shrink: 0，子盒子不会被压缩宽度；

flex-shrink: 0;

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