zrJmeL

index.html

  <div class="flex_element header">
    <div class="wrapper">
       <div class="third_party_class">This is the main header,woot</div>
    </div>
  </div>
<div class="flex_element body">
    <div class="wrapper">
       <div class="third_party_class">
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
         <p>Keep Scrolling, this is fun!</p>
      </div>
    </div>
  </div>
<div class="flex_element footer">
    <div class="wrapper">
       <div class="third_party_class">footer</div>
    </div>
  </div>

style.css

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin:0;
}

.wrapper {
 max-width: 800px;
 margin: 0 auto;
}

.flex_element {
  background: red;
}

.third_party_class {
  padding:20px;
}

.body {
  overflow-y:scroll;
  background: blue;
  color:white;
}

.footer {
  margin-top:auto;
}

zrJmeL.markdown

zrJmeL

A Pen by Jon Roobottom on CodePen.

License.