flex子元素超过父元素宽度时，子元素宽度被压缩

问题描述：

  在使用flex布局时，左边的div宽度为父元素的百分之80%，右边button宽度固定，但是最终结果时div和button的实际宽度都被压缩了。具体代码如下：

 

<div class="parent">
		<div class="sub"></div>
		<button class="button">button</button>
</div>

.parent{
	background: red;
	display: flex;
	height: 200px;
	padding:100px 100px;
	width: 500px;
}
.sub{
	background: green;
	width: 80%;
}
.button{
	background: blue;
	width: 180px;
}

问题原因：

当容器没有足够大的空间来存放所有的子元素时，子元素会按照一定的压缩率被压缩，这个压缩率就是由flex-shrink来设置（flex-shrink默认值为1）

解决方法：

1. 需要在button元素中引入flex属性,添加flex: 0 0 180px；
2. 将button的width改为min-width；

关于flex属性可以参考：https://www.jianshu.com/p/17b1b445ecd4