父元素设置为flex布局，子元素的高度会失效（会出现挤压效果）

问题描述：

如下图所示权限开通的背景图片被下面的挤压了，给这个图片设置了高度为110px明显不生效，

解放方案：

对于设置了父元素为flex布局的子元素而言，如果没有设置flex-shrink，那么子元素可能会被它的兄弟元素所挤压，是的子元素的高度失效。当下面部分高度不够用时候就会

挤压到上面，使得上面的高度丧失，变成只有里面的文字或者内容撑开的高度。

因此，我们这里要使用到flex的另外一个属性，flex-shrink。

 

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。