小编D. *_*ine的帖子

我创建了一个基于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>

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

在Chrome和Safari中,一切都运行得很好,但是当我在Firefox中加载网站时会出现问题. 我在这里创建了一个网站的笔.有没有人对如何在所有三种浏览器中显示相同内容有任何建议？

非常感谢!