Flexbox scrolling or stretch does not work properly in Firefox

Question

I've created a website with a flexbox-based structure. My goal was to have the entire viewable page filled by divs, but to avoid letting any divs push below the lower limit of the browser window. One of my divs should scroll when the text overflows, but in Firefox it instead affects the entire page.

Here is my HTML:

<div class="header_bar">header</div>
<div class="page_grid">
    <div class="pg_nav">nav</div>
    <div class="pg_main">This is the div that should scroll</div>
    <div class="pg_sidebar pg_sidebar2">sidebar</div>
</div>

And here is my CSS:

html, body
{
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_bar
{
    flex: 0 0 auto;
}

.page_grid
{
    flex: 1;
    display: flex;
}

.pg_nav
{
    width: 25%;
}

.pg_main
{
    width: 50%;
    overflow-y: auto;
}

.pg_sidebar
{
    width: 25%;
}

Everything works completely fine in Chrome and Safari, but there are problems when I load the website in Firefox. I created a pen of the site here. Does anyone have any advice on how to make this show up the same across all three browsers?

Thanks so much!

Answer 1

As stated above by magenetwd, this is a known firefox bug, when I added min-width:0;min-height:0; to .page_grid, the problem solved.

.page_grid
{
    flex: 1;
    display: flex;
    color: #FFFFFF;
    /* Firefox bug fix styles */
    min-width:0;
    min-height:0;
    /* End of Firefox bug fix styles */
}