Html Flexbox滚动或拉伸在Firefox中无法正常工作

我创建了一个基于flexbox结构的网站。我的目标是让整个可查看页面由div填充，但避免让任何div推到浏览器窗口的下限以下。当文本溢出时，我的一个div应该滚动，但在Firefox中，它会影响整个页面

这是我的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>

在Chrome和Safari中，一切都很好，但在Firefox中加载网站时会出现问题。有没有人对如何在所有三种浏览器上都显示相同的内容有什么建议

非常感谢

如上所述，当我添加

min width:0时，这是已知的；最小高度：0

到

。page\u 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 */
}

---

已知bug，下面是解决方法。这解决了我的相关问题，应该是公认的答案。在我的情况下，滚动条丢失了，尽管有溢出。我不能相信这个错误在一年后仍然在Firefox 61中流行，但这个修复对我也起到了作用+100谢谢！8-)

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