Flex Header/Footer

Example of Flex header, footer, content

by Manuel Souto Pico

HTML

<body>
	<div class="flex_container">
	  <div class="flex_header">
	  	 This is the fixed child of the flex container 
       <img id="logo" src="../../../../Images/diffeye.png">
	  </div>
	  <div class="flex_content">
	  	    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 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 
	  </div>
	  <div class="flex_footer" >
	  	this is the fixed footer child of the flex container asdfadsf
	  	<br> another line
	  </div>
	  
	</div>
</body>

CSS

html, body, .flex_container
{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0px;
    overflow: hidden;
}

.flex_container {
	display:flex;
	flex-flow: column nowrap;
}

.flex_header {
	flex:none;
	background-color:lightblue;
	color:white;
  height: 2em;
}

.flex_footer{
	flex:none;
	background-color:lightgreen;
	color:black;
  height: 5em;
}

.flex_content{
	flex:auto;
	background-color:lightyellow;
	overflow-y:auto;
}

#logo {
    height:6em;
    position: relative;
    bottom: 0;
    float: right;
    }