2 column flex layout fills 100% of window but not window overflow

Question

I'm having an issue with a two column layout (sidebar + primary content). The goal is to have this fill 100% vertical space.

Currently it fills to the window, but if the content is below the window requiring you to scroll, the height of the flex container is only as large as the window.

See this jsfiddle. Note how the sidebar fills the window in the bottom right, but when you scroll it does not expand to accommodate the window overflow

HTML:

<div id="page_container">
    <div id="page_sidebar"></div>
    <div id="page_primary">
    </div>
</div>

CSS:

html, body{
    height: 100%;
}
    #page_container{
        display: flex;
        width: 100%;
        height: 100%;
        flex: 1;
    }
    #page_sidebar{
        flex: 0 0 220px;
        background-color: #2E3254;
    }
    #page_primary{
        flex: 1;
        background-color: #F8F9FA;
    }

Answer 1

Remove height:100% from your #page_container.