JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app">
  <div class="header">line1<br/>line2<br/>line3</div>
  <div class="body">
    <div class="sidebar">sidebar</div>
    <div class="content">
      <div class="scroller">
        <div class="tall-content">Hello FlexBox! Scroll me.</div>
      </div>
     </div>
  </div>
  <div class="footer">line1<br/>line2</div>
</div>

CSS

html, body, .app {
  width:100%;
  height:100%;
}

body {
  margin:0;
}

.app {  
  display:flex;
  flex-direction:column;
}

/* naturally sized */
.header {
  background-color:red;
}

/* fills remaining space between */
.body {
  flex:1 1 auto;
  display:flex;
  flex-direction:row;
}

/* naturally sized */
.footer {
  background-color:green;
}

/* naturally sized */
.sidebar {
  background-color:orange;
}

/* fills remaining space */
.content {
  position: relative;
  flex:1 1 auto;
  background-color:lightblue;
}

.scroller {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:auto;
}

.tall-content {
  height:700px;
  background-color:yellow;
}