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

Question

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

但后来我在 FireFox 上仔细检查了这个，基本上运行进入了各种问题。故障排除导致 mind-numbing 件事情乱七八糟。

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

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

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

非常感谢任何帮助！

Answer 1

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

您是否也尝试过将 tabContent 设为 class？有时这会解决奇怪的 css 继承或覆盖问题（对我来说）。

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

Using flexbox and overflow hidden & scroll not working in Firefox?

html

css

firefox

overflow

flexbox