css flex布局，自适应高度

如下图所示，

中间红色块儿需要根据手机屏幕大小自适应高度

 

css可这样写，黑色块儿上加flex-column，红色块上加flex-bottom

.flex-column {
	height: 100% !important;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 100%;
	.flex-bottom {
		box-sizing: border-box;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		z-index: 5;
		overflow-x: hidden;
		height: 100%;
		overflow-y: auto;
	}
}

至此，红色块儿部分会根据屏幕大小自适应高度

同样也适用于PC端