Использование flexbox и переполнения скрытых & прокрутки не работает в Firefox?

Question

У меня относительно простой скелет для 1-страничного сайта. В области заголовка я хотел бы остановиться, который я выполнил (по крайней мере, в браузере Chrome и моего смартфона), установив 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 застревает в конце исходного окна просмотра. Как и в случае, если высота области просмотра составляет 900 пикселей, bottomBlock, по-видимому, находится на уровне 901 пикселей.

Если я переведу bottomBlock с точностью до tabContent, то он работает как следует.
Но эта проблема дала мне слишком большую головную боль, чтобы просто отпустить ее.

Я не уверен, как это сделать, поскольку полоса прокрутки является основной проблемой здесь, и в окне рендеринга скрипта также есть один.

Любая помощь очень ценится!

Answer 1

Это работает для меня в firefox 45.0.1, если вы полностью удалите height:100% от #tabContent. Для чего тебе это? Поскольку последний элемент блока #bottomBlock всегда будет находиться на самом дне. Возможно, это странная проблема с приоритетом/приоритетом CSS. Я мог представить, что FF не может правильно подсчитать общую высоту контента из-за конкурентов #tabContent > * и #bottomBlock.

Вы также попытались сделать tabContent как класс? Иногда это решает странные css наследовать или переопределять проблемы (для меня).