Flexbox Holy Grail Layout: Fixed Header, Fixed Left Nav, Fluid Content Area, Fixed Right Sidebar

Question

I\'m attempting to build the \"Holy Grail\" layout using Flexbox.

• Fixed Header
• Fixed, Collapsible, Scrollable Left Nav
• Flexible Content Area<

Answer 1

Figured it out!

Turns out there were some CSS conflicts with

and , and all I had to do was remove the

wrapper, then add the flex definitions directly to the page body.

- - - Here's the full working jdFiddle - - -

- - - Here's the simplified jdFiddle - - -

New HTML Structure:

  

  
    
Left Nav
    

    
Right Nav
  

New Supporting CSS:

html, body {
    margin: 0;
    height: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
}

header { 
    z-index: 0;
    flex: 0 64px;
    display: flex;
}

app {
    flex: 1;
    display: flex;
}

nav {
    flex: 0 0 256px;
    order: 0;
}

article {
    flex: 1;
    order: 1;
    overflow: auto;
}

aside {
    flex: 0 0 256px;
    order: 2;
}

Feel free to use this as a basis for your applications! Enjoy!