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

i trying use flexbox approach create layout resize header width , content dimensions when window resized, maintain sidebar dimensions.

i found following example flexbox approach me started, , works desired content div itself. after looking over, i'm unsure how make work described fixed width, 100% height sidebar.

css 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; /* above 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 example:

  <div class="row header">      <p><b>header</b> <br /> <br />(sized 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> 

the following codepen example gave me information needed 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; }  /* of these 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 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 sidebar on right side, moved <div class="sidebar">sidebar</div>to above closing div tag .body class.