flexbox holy grail layout

for IE, too

HTML

<div class="flex-container">
			
			<div class="header">
				Header here
			</div>
			
			<div class="main">
				
				<div class="item-1">
					col 1
				</div>
			
				<div class="content">
					main col
				</div>
			
				<div class="item-3">
					col 3
				</div>
				
			</div>
			
			
			
			<div class="footer">
				footer
			</div>
			
			
</div>

SCSS

html,body{
height:100%;
}

.flex-container{
		width:100;
		height:100%;
		min-height:100%;
		max-width:800px;
		display:flex; // declare as a flex item
		flex-direction:column; // declare flex direction vertical axis (children)
		margin:auto; // position centrally
	}
	
	.header{
		background-color:yellow;
		min-height:10%;
	}
	
	.main{
		flex-grow:2; // this will take up all negative space on vertical axis
		display:flex; // declare as flex item
		flex-direction:row; // declare as flex direction horizontal axis (children)
    min-height:80%;
    
		.item-1{
			background-color:red;
			align-self:stretch;
			flex:0 0 20%;
		}
		.content{
			background-color:green;
			align-self:stretch;
			flex:0 0 60%;
		}
		.item-3{
			background-color:red;
			align-self:stretch;
			flex:0 0 20%;
		}
	}
	
	.footer{
		min-height:10%;
		background-color:blue;
		width:100%;
		color:white;
	}