解决flex布局导致子元素的宽度无效的问题

在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候。子元素的宽度就自适应了。
造成此问题的原因是因为，felx布局下有一个属性flex-shrink

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

解决办法
1.子元素设置

flex: 0 0 50px;

2.子元素使用min-width代替width (此方法一般起不到很大的作用，只能解决宽度失效的问题，但会带来很多副作用：比如当子元素内容超出长度是，子元素的宽度就不再固定)

3.子元素设置

flex-shrink:0 
此方法会导致父盒子的滚动条失效，需要在父盒子外部再包一层父盒子。并且设置overflow: auto