Flex Vertical scrolling

Vertical scrolling. Footer and Header are fixed. We are using: prefixfree.js

by Nikolay Petrov

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>

<container>

  
  <header>Header Header Header Header Header Header Header Header Header Header Header Header </header>

  <content>
      content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>

  </content>

  <footer>Footer</footer>



</container>

CSS

html,body { 
    height: 100%; 
}

container {
    display: flex;
    flex-flow: column; 
    box-sizing: border-box;
    
      
    height: 100%;
    padding: 3em;
    background: #ededed;
}

content {
    overflow: auto;
    background: #808080;
}

header, footer { 
    background: #fff; 
}