Question

我创建了一个基于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中加载网站时会出现问题。 I created a pen of the site here。有没有人对如何在所有三种浏览器中显示相同内容有任何建议？

非常感谢！

Answer 1

正如magenetwd所述，这是一个众所周知的firefox bug，当我将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 */
}

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

1 个答案: