.full-screen
  .header Header
  .main
    .left Menu-stuff here. No way this will fit.
      ul
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
        li Menu Entry
    .middle Large stuff here
    .right Another sidebar
  .footer Footer  
View Compiled
.flex-container {

  display: flex;

  > * {

    flex: 0 0 auto;
  }  
}

.stretchy {

  flex: 1 1 auto;
}

.column {

  flex-direction: column;
}

html,
body,
.full-screen {
  height: 100%;
}

body {
  margin: 0;
}

.full-screen {

  .flex-container;
  .column;

  > .header,
  > .footer {
    height: 50px;
    
    background: #555;
    color: white;
  }

  > .main {
    .stretchy;

    .flex-container;

    > .left,
    > .right {
      width: 200px;

      background: #eee;
    }

    > .middle {
      .stretchy;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.