flex expanding central content

demonstration of flex for fixed header and footer with expanding central content that fills remaining viewport height and scrolls if content expands beyond bounds.

by kyllle

HTML

<body>
	<div class="r_flex_container">
	  <div class="r_flex_fixed_child">
	  	<p> This is the fixed child of the flex container </p>
	  </div>
	  <div class="r_flex_expand_child">
	  	    <article>an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  1 
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  2
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf 
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  3
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  4
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf 
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  5
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  6 
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  7
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf 
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  8
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  asdf   asdf  asdf
	  	    an article blah blah blah 
	  	    	asdfasdf  9   9  9</article>
	  </div>
	  
	 ...

CSS

html, body, .r_flex_container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.r_flex_container {
	display:flex;
	flex-flow: column nowrap;
	background-color:blue;
}

.r_flex_fixed_child {
	flex:none;
	background-color:black;
	color:white;

}
.r_flex_expand_child {
	flex:auto;
	background-color:yellow;
	overflow-y:scroll;
}