Resize the header and content div dimensions respond when the window size changes but maintain right sidebar dimensions - css

Question

I am trying to use a flexbox approach to create a layout that will resize the header width and content dimensions when a window is resized, but maintain the sidebar dimensions.
I found the following example from this Flexbox Approach to get me started, and it works as desired for the content div itself. But after looking it over, I'm unsure how to make it work as described with a fixed width, 100% height sidebar.
CSS from example:
<style>
html, body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ }
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
HTML from example:
<div class="row header">
<p><b>header</b> <br /> <br />(sized to content)</p>
</div> <div class="row content">
<p> <b>content</b> (fills remaining space) </p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>

Answer 1

The following codepen example gave me the information I needed to get my layout working:
http://codepen.io/JosephSilber/pen/HqgAz
CSS:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
.column > div {
height: 2000px;
background: red;
}
.column:nth-child(2) > div {
height: auto;
}
/* All of these are just for this demo's design. */
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.sidebar {
background: #666;
padding: 4px 20px;
color: #fff;
}
.page-header {
padding: 6px 20px;
background: #004141;
color: #fff;
font-size: .8em;
}
.content {
background: #ddd;
}
HTML:
<div class="header">Main header</div>
<div class="body">
Move this: <div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="box">
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
</div>
</div>
</div>
To here: <div class="sidebar">Sidebar</div>
</div>
To get the sidebar on the right side, I simply moved <div class="sidebar">Sidebar</div>to just above the closing div tag for the .body class.