Keep div within viewport with flexbox - html

Question

I'm working on a page that has a header, 2 sidebars, a content area and a footer in the content area. Is it possible to keep the content area and footer inside the viewport so the only scrolling is the content area (with the footer fixed to the bottom) using flexbox.
Here's an example of what I'm trying to accomplish:
http://jsfiddle.net/5qqqfbnc/1/
Notice how the page scrolls. What I'm looking for is just the blue area scrolling (with the yellow footer always in view). I'd still like to maintain the window flexibility and hopefully accomplish this without javascript.
HTML:
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div class="left-sidebar">Left Sidebar</div>
<div class="center">
<div class="work-area">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id justo libero. Aenean est libero, venenatis vitae pulvinar nec, ultrices id nulla. Morbi ante turpis, faucibus id eros sed, pharetra efficitur eros. Etiam porttitor pretium tempus. Quisque ac tortor vitae risus tristique tempus quis id ante. Pellentesque maximus leo vel dolor dignissim tempus. Nam fringilla, augue a euismod aliquam, lorem velit placerat dui, non efficitur justo urna in ante. Aliquam vehicula vel sem sit amet feugiat. Proin ex leo, auctor ac elit in, malesuada vestibulum orci. Duis eget porta urna. Mauris lacinia vestibulum augue, non volutpat justo accumsan sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur malesuada quam nulla, et viverra orci luctus vel.</p>
<p>Donec ut sem sit amet lacus rhoncus pretium. Morbi varius sit amet lorem et tempus. Fusce ipsum neque, rhoncus nec urna sed, posuere faucibus urna. Donec sit amet placerat nunc, pretium facilisis mauris. Nulla facilisi. Sed id libero mi. Praesent in auctor nisi, id euismod dui. Proin suscipit lacus turpis, eu vulputate dolor condimentum sit amet. Mauris in accumsan lacus. Nunc a sem magna. Curabitur imperdiet magna tincidunt erat consequat scelerisque.</p>
<p>Ut ac dolor nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet turpis nisl. Mauris eget nulla at augue varius iaculis tincidunt id sem. Proin arcu nunc, vulputate eget sodales et, iaculis a quam. Morbi ex orci, commodo at posuere sed, facilisis eu purus. Nunc id neque nisi. In egestas nisl nec mi molestie tincidunt. Aliquam dictum, arcu et fringilla faucibus, ex nisi sollicitudin nisl, in egestas leo diam eu leo.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus condimentum risus sit amet est vehicula, tempor congue quam rutrum. Fusce dictum vehicula dui, at vehicula sem tempor sed. Etiam a arcu consectetur, convallis ipsum id, fermentum sem. Pellentesque eget fringilla diam. Nulla sollicitudin vel turpis a ultricies. Cras eget massa a felis porttitor fringilla sed non diam. Etiam vel velit porttitor, porta felis a, egestas enim. Sed ac dui nibh. Quisque accumsan fermentum commodo. Ut sit amet purus ante. Nulla nec velit lacinia, auctor sapien porta, viverra neque. Praesent euismod suscipit enim, eget rutrum justo ultricies id.</p>
<p>Pellentesque magna urna, congue eu dui sit amet, posuere tempor erat. Curabitur fermentum magna quis orci tincidunt, in efficitur urna bibendum. Donec finibus porttitor felis id tristique. Sed vitae sem eget nulla tincidunt sagittis et vitae ante. Nulla id gravida lacus. In ligula eros, sodales eget convallis a, pharetra eu mauris. Aenean sollicitudin est magna, ac vehicula dolor tincidunt vel. Donec ut pellentesque augue.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus condimentum risus sit amet est vehicula, tempor congue quam rutrum. Fusce dictum vehicula dui, at vehicula sem tempor sed. Etiam a arcu consectetur, convallis ipsum id, fermentum sem. Pellentesque eget fringilla diam. Nulla sollicitudin vel turpis a ultricies. Cras eget massa a felis porttitor fringilla sed non diam. Etiam vel velit porttitor, porta felis a, egestas enim. Sed ac dui nibh. Quisque accumsan fermentum commodo. Ut sit amet purus ante. Nulla nec velit lacinia, auctor sapien porta, viverra neque. Praesent euismod suscipit enim, eget rutrum justo ultricies id.</p>
<p>Pellentesque magna urna, congue eu dui sit amet, posuere tempor erat. Curabitur fermentum magna quis orci tincidunt, in efficitur urna bibendum. Donec finibus porttitor felis id tristique. Sed vitae sem eget nulla tincidunt sagittis et vitae ante. Nulla id gravida lacus. In ligula eros, sodales eget convallis a, pharetra eu mauris. Aenean sollicitudin est magna, ac vehicula dolor tincidunt vel. Donec ut pellentesque augue.</p>
</div>
<div class="settings">Settings Bar</div>
</div>
<div class="right-sidebar">Right Sidebar</div>
</div>
</div>
CSS:
body, html {
margin: 0;
width: 100%;
height: 100%;
display: flex;
}
div {
display: flex;
flex-grow: 1;
}
p {
margin: 0;
padding: 1em 0;
display: block;
color: #fff;
box-sizing: border-box;
}
.wrapper {
background: blue;
flex-grow: 1;
flex-direction: column;
}
.header {
background: red;
min-height: 50px;
flex-grow: 0;
width: 100%;
padding: 1em;
box-sizing: border-box;
}
.left-sidebar, .right-sidebar {
background: green;
width: 100px;
flex-grow: 0;
padding: 1em;
box-sizing: border-box;
}
.center {
flex-direction: column;
overflow: auto;
}
.settings {
background: yellow;
flex-grow: 0;
min-height: 30px;
padding: 1em;
box-sizing: border-box;
}
.work-area {
flex-direction: column;
}

Answer 1

Does this work? http://jsfiddle.net/amwill/5qqqfbnc/3/
Here's what I added:
body, html { overflow: hidden; }
.header {
position: absolute;
top: 0px;
}
.center {
position: relative;
top: 50px;
height: 100vh;
}
.settings {
position: fixed; //sticky footer
bottom: 0;
width: 80%; //whatever width it needs to be
}