flex布局左边固定，右边自适应

new_gist_file.css

.demo{
	/*flex布局（作用于容器）*/
	display: flex;
 
	/*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
	/*align-items: stretch;*/
}
 
.demo .left{
	/*左边固定宽度，必须设置其最小宽度和最大宽度*/
	width: 100px;
	min-width: 100px;
	max-width: 100px;
 
	/*高度自由分配*/
	height: auto;
	background: #B4D3F7;
 
	/*空白区域分配比例为0（作用于项目）*/
	flex-grow: 0;
}
 
.demo .right{
	margin-left: 10px;
	width: auto;
	height: 200px;
	background: #F7E8B4;
 
	/*空白区域分配比例为1（作用于项目）
	左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
	左边成固定的宽度，右边为自适应宽度*/
	flex-grow: 1;
}

new_gist_file.html

<div class="demo">
	<div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
	<div class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px</div>
</div>

左边固定宽度，为什么必须设置其最小宽度和最大宽度呢，不设置会出现什么意料之外的情况

你可以尝试一下，不设置最小宽度，左边的div的大小会变化的。

flex-grow: 1 可以写成 flex: 1 吗？