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

Question

I have a relatively simple skeleton for a 1-page site.
The header area I'd like to stay put which I accomplished (at least in Chrome and my smartphone's native browser) by setting overflow:hidden on the overall container, then setting overflow:scroll to the scrollable area.
But then I went to double check this on FireFox and basically ran into all sorts of issues. Troubleshooting resulted in a mind-numbing amount of things falling out of place.
<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>
with these styling rules
#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%;
}
When working, this results in the head area staying put while allowing for the rest of the content to scroll, with bottomBlock appearing at the end of the scrollable area.
However, in firefox, while scrolling is possible bottomBlock is stuck at end of initial viewport. As in if the viewport height is 900px, bottomBlock is seemingly absolute positioned at 901px.
If I move bottomBlock to within tabContent, then it works as it should.
But this issue has given me far too great of a headache to simply let it go.
I'm not sure how to make a fiddle of this, since the scroll bar is the main issue here, and fiddle's render box also has one.
Any help is greatly appreciated!

Answer 1

It works for me in firefox 45.0.1 if you remove the height:100% from #tabContent completely. What do you need it for? As the last block element #bottomBlock will always be on the very bottom.
Maybe it's a wierd css overriding/priority issue. I could imagine FF can't calculate the overall content height correctly because of the competetive #tabContent > * and #bottomBlock selectors.
Did you also try making tabContent as a class? Sometimes that solves strange css inherit or override problems (for me).