Flexbox Column UI Layout

HTML

<header id="header" >
    <h1>This is a header</h1>
</header>
<section id="container" >
    
    <nav>
        <ul>
        <li>Menu 1
        <li>Menu 2
        <li>Menu 3
        <li>Menu 4
        </ul>
    </nav>
    <article>
        <h2>Foo Bar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie, nunc convallis sagittis convallis, sem urna commodo sapien, sit amet ornre <p>Duis pharetra convallis erat vel tempus. Ut et nulla varius, interdum neque sed, laoreet est. Duis nec mattis nisl. Sed imperdiet quis est quis auctor. Vivamus lacus libero, tincidunt nec adipiscing sollicitudin, vestibulum eu felis. Ut eleifend odio luctus est facilisis semp.

<p>Sed semper interdum condimentum. Sed tellus dolor, lacinia in convallis et, suscipit quis enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin at purus telluspit puruskhbh.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie, nunc convallis sagittis convallis, sem urna commodo sapien, sit amet ornre <p>Duis pharetra convallis erat vel tempus. Ut et nulla varius, interdum neque sed, laoreet est. Duis nec mattis nisl. Sed imperdiet quis est quis auctor. Vivamus lacus libero, tincidunt nec adipiscing sollicitudin, vestibulum eu felis. Ut eleifend odio luctus est facilisis semp.

<p>Sed semper interdum condimentum. Sed tellus dolor, lacinia in convallis et, suscipit quis enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin at purus telluspit puruskhbh.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie, nunc convallis sagittis convallis, sem urna commodo sapien, sit amet ornre <p>Duis pharetra convallis erat vel tempus. Ut et nulla varius, interdum neque sed, laoreet est. Duis nec mattis nisl. Sed imperdiet quis est quis auctor. Vivamus lacus libero, tincidunt nec adipiscing sollicitudin, vestibulum eu felis....

CSS

html, body {
    height: 100%;    
}
#container {
    display: flex;
    height: 100%;
}
nav, article {
    flex-direction: column; /* optional? */
    height: 100%;
}
nav {
    background: yellow;
    display: inline-flex;
}
article {
    display: inline-flex;
    background-color: orange;
}
header {
    background-color: green;
}
footer {
    background-color: gray;
}
h1 { margin: 0;}