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.

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>
	  <div...

CSS

body {
	height: 100vh;
    background: red;
    margin: 0;
}

.r_flex_container{
    height: 100%;
    display: flex;
    margin: 0;
	flex-flow: column nowrap;
	background: blue;
}

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

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