I am trying to achieve this layout with Flexboox and Bootstrap 4:

* Fixed header on top
* Fixed left sidebar
* Fluid content area

I don't know how to make the header and sidebar fixed. Everything else works so far how I want:

HTML:

```
<header>
    header
</header>
<app>
    <nav>
        nav
    </nav>
    <article>
        Content
    </article>
</app>

```

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;

    background: white;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
}

app {
    flex: 1;
    display: flex;
}

nav {
    background: #FAF9F8;
    flex: 0 0 256px;
    order: 0;
    border-right: 1px solid #d9d9d9;
}

article {
    background: #F3F3F5;
    flex: 1 1 100px;
    order: 1;

    // Simulate large height
    height: 2000px;
}

```

<http://jsfiddle.net/LLfcL28u/203/>