Flexbox full-page web app layout with scrollable panels.

index.jade

.full-screen.column
  .header Header
  .main.stretchy
    .left Menu-stuff here
      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.stretchy Large stuff here
    .right.column
      .panel Details?
      .panel Details?
      .panel Details?
      .panel Details?
      .panel Details?
      .panel.stretchy Details?
  .footer Footer

style.less

.flex-container {

  display: flex;
  overflow: hidden;

  &.column {

    flex-direction: column;
  }

  &>* {

    flex: 0 0 auto;
    
    &.stretchy {
      
      flex: 1 1 auto;
    }
    
    &>* {
      
      overflow: auto;
    }
  }  
}




html,
body,
.full-screen {

  height: 100%;
  margin: 0;
}

.full-screen {
  
  .flex-container;
  
  &>.header,
  &>.footer {
    height: 50px;
    background: #555;
    color: white;
  }
  
  &>.main {
    
    .flex-container;
    
    &>.left,
    &>.right {
      width: 200px;
      background: #eee;
    }    

    &>.right > .panel {
      height: 100px;
      margin: 10px;
      background: white;
      border-radius: 10px;      
    }    
  }
}