Inner Scroll Sidebar w/ Flexbox

Uses flexbox to position cols

by Josh Weir

HTML

<div class="container">
    <div class="main">
        asdfsssssMain stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>
        Main stuff<br>Main stuff<br>Main stuff<br>
        Main stuff<br>
        Main stuff<br>
     ...

CSS

html, body {
    height: 100%;
}

.container{
    display: flex;
    height: 100%;
}

.main{
    flex: 1 0 auto;
    background: green;
    overflow-y: auto;
    min-height: 0px;
}

aside{
    flex: none;
    width: 250px;
    height: 100%;
    background: blue;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: red;
}

#container header {
    background-color: gray;
    flex: none;
}

#container article {
    flex: 1 1 auto;
    overflow-y: scroll;
    min-height: 0px;
    display: flex;
    flex-direction: column-reverse;
}

#container article .article-inner

#container footer {
    flex: none;
    background-color: gray;
}