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

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

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候。纤瞎子元素的宽度就自适应了。

造成此问题的原因是因为，felx布局下有一个属性flex-shrink

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

解决办法

1.子元素设置

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

3.子元素设置

以下是演清亮拆示demo：

**************************第一个问题************************

1，当一层flex布局的时候，设置子元素的width:100%就没有问题；

效果如下：

2，当页面中多层flex布局嵌套的时候，设置其中子元素的width：100%会不起作用。

效果如下：

3，把元素设置为绝对定位：

效果如下图：

**************************第二个问题************************

1，首先当一层flex布局的时候，flex:1与overflow:hidden没有问题；

效果如图：

2，当我们变成嵌套flex布局的时候，样式就不生效了：

效果如图：

3，这是，只需要给子元答枣素设置width：0就键宏可以了。

效果如图：

---