使用 flexbox 和溢出隐藏和滚动在 Firefox 中不起作用？

Question

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

但后来我在 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 卡在初始视口的末尾。就像视口高度为 900 像素一样，bottomBlock 似乎绝对定位在 901 像素。

如果我将bottomBlock 移动到tabContent 内，那么它应该可以正常工作。
但是这个问题让我非常头疼，不能简单地放手。

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

非常感谢任何帮助！

Answer 1

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

您是否也尝试将 tabContent 作为一个类？有时这可以解决奇怪的 CSS 继承或覆盖问题（对我而言）。