FlexBox Layout

index.html

<div class="application">
  <div class="sidebar">Sidebar</div>
  <div class="main">
    <div class="header">Header</div>
    <div class="content">
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
      <h3>Content with scroll</h3>
    </div>
    <div class="footer">Footer</div>
  </div>
</div>

index.styl

.application {
  padding: 1vh;
  display: flex;
  border: 1px solid red;
  height: 94vh;
  text-align: center;
  font-family: Calibri;
  overflow: auto;

    .sidebar {
      border: 1px solid blue;
      color: blue;
      padding: 5px;
      margin-right: 5px;
      min-width: 250px;
      max-width: 250px;    
    }

    .main {
      border: 1px solid green;
      color: green;
      padding: 5px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .header, .content, .footer {
        border: 1px solid gray;
        padding: 5px;
        color: gray;
      }

      .header, .footer { height: 30px; }

      .header { border-color: brown; color: brown; }
      .footer { border-color: royalblue; color: royalblue; }

      .content {
        flex-grow: 1;
        overflow: auto;
        margin: 5px 0;
      }
    }
  }

sample.md

https://codepen.io/anon/pen/ZKQJvM