css flex layout, adaptive height

As shown below,

The red block in the middle needs to adapt to the height of the mobile phone screen

 

 

CSS can be written like this, add flex-column to the black block, add flex-bottom to the red block

.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;
	}
}

So far, the red block part will adapt to the height of the screen according to the size

Also applies to PC side