Flexbox Макет Holy Grail: фиксированный заголовок, фиксированный левый Nav, область содержимого жидкости, исправленная правая боковая панель

Я пытаюсь построить макет "Святой Грааль" с помощью Flexbox.

• Фиксированный заголовок
• Исправлено, Складное, прокручиваемое влево Nav
• Гибкая область содержимого
• Исправлено, Складное, прокручиваемое право Nav

См. ниже:

У меня все работает, за исключением высоты области "app" под заголовком. Сейчас он 100vh (100% высоты видового экрана), но это включает в себя заголовок 64px.

Я попытался вычислить (100vh - 64px), но это не хорошо сгибает flex.

Здесь моя основная структура HTML:

<main>
    <header></header>
    <app>
        <nav>Left Nav</nav>
        <article>Content</article>
        <aside>Right Nav</aside>
    </app>
</main>

И поддерживающий CSS:

main {
    display: flex;
    flex-direction: column;
}

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

app {
    flex: 1 1 100vh;
    display: flex;
}

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

article {
    flex: 1 1 100px;
    order: 1;
}

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

- - - Полный jsFiddle Здесь - - -

- - - Упрощенный jsFiddle Здесь - - -