html - 使用 flexbox 和 overflow hidden & scroll 在 Firefox 中不起作用？

Question

我有一个相对简单的单页网站框架。 我想保留的标题区域(至少在 Chrome 和我的智能手机的 native 浏览器中)是通过在整个容器上设置 overflow:hidden，然后设置 overflow:scroll 到可滚动区域。

但后来我在 FireFox 上仔细检查了一下，基本上遇到了各种各样的问题。故障排除导致大量困惑的事情发生。

    <div id="mainBlock">

        <div id="tabContent">
            <div id="one">
                <h1>one</h1>
            </div>
            <div id="two">
                <h1>two</h1>
            </div>
            <div id="three">
                <h1>three</h1>
            </div>
            <div id="four">
                <h1>four</h1>
            </div>
        </div>

        <div id="bottomBlock">
            <div>hellow</div>
        </div>

    </div>

使用这些样式规则

#mainBlock {
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-content: center;
    align-items: center;
}
#tabContent {
    height: 100%;
    width: 100%;
}
#tabContent > *{
    height: 500px;
}
#bottomBlock {
    background-color: #444;
    height: 24px;
    width: 100%;
}

工作时，这会导致头部区域保持不变，同时允许其余内容滚动，bottomBlock 出现在可滚动区域的末尾。 但是，在 Firefox 中，虽然可以滚动，但 bottomBlock 卡在初始视口(viewport)的末尾。如果视口(viewport)高度为 900px，bottomBlock 看似绝对定位在 901px。

如果我将 bottomBlock 移动到 tabContent 中，它就会正常工作。
但是这个问题让我非常头疼，无法简单地放弃它。

我不确定如何解决这个问题，因为滚动条是这里的主要问题，而 fiddle 的渲染框也有一个。

非常感谢任何帮助!

Answer 1

如果您从 #tabContent 中完全删除 height:100%，它在 firefox 45.0.1 中对我有用。你需要它做什么？作为最后一个 block 元素 #bottomBlock 将始终位于最底部。 也许这是一个奇怪的 css 覆盖/优先级问题。我可以想象 FF 无法正确计算整体内容高度，因为有竞争力的 #tabContent > * 和 #bottomBlock 选择器。

您是否也尝试过将 tabContent 作为一个类？有时这会解决奇怪的 css 继承或覆盖问题(对我来说)。