Flexbox Scrolling Does Not Work in Firefox

Question

I created a website with a flexbox-based structure. My goal was to have the entire page being viewed filled with a div, but to prevent any divs from dropping below the lower limit of the browser window. One of my divs should scroll when the text overflows, but in Firefox it affects the whole 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 fine in Chrome and Safari, but there are problems loading the website in Firefox. I created a site handle here . Does anyone have any tips on how to make this the same for all three browsers?

Many thanks!

Answer 1

magenetwd, firefox, min-width:0;min-height:0; .page_grid, .

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