display: table-row не работает в браузерах, кроме FireFox

Question

Я использую этот код, который отлично работает в Firefox, но не в Chrome, Edge, IE11.Кажется, проблема связана с display:table-row.Желтая боковая панель с красными кнопками должна оставаться на той же высоте зеленой зоны.Это верно в FireFox, но не везде.

Есть ли возможность изменить его, чтобы сделать его более поддерживаемым?

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  padding:0;
  margin:0;
  display:table;
}

#titleContainer{
  display:table-row;
  background-color: blue;
}

#contentContainer{
  display:table-row;
  background-color: red;
  height: 100%;
  position:relative;
}

#sidebar{
  position: absolute;
  left: 6px;
  overflow: hidden;
  width: 40px;
  margin: 0;
  padding: 0;
  top: 6px;
  bottom: 6px;
  background-color: yellow;
  z-index:1000;
}

#sidebar > ul {
  list-style-type:none;
  width:40px;
  margin:0;
  padding:0;
  position:absolute;
}

#sidebar > ul + ul {
  bottom:0;
}

#sidebar > ul > li {
  width:100%;
  overflow:hidden;
  height:40px;
  background-color: red;
}

#page{
  background-color: green;
  height:100%;
  width:100%;
  position:absolute;
}

<div id="titleContainer">
  <center>
  <h2>
  TITLE
  </h2>
  </center>
</div>
<div id="contentContainer">
<div id="sidebar">
<ul>
  <li>TOP</li>
</ul>
<ul>
  <li>BOTTOM</li>
</ul>
</div>
<div id="page"></div>
</div>

Answer 1

Хорошо, поэтому я достиг той же функциональности, что и в моем примере, но с поддержкой других браузеров, также удалив display:table и использовав вместо него display:flex.Мои главные проблемы были на самом деле (я должен был объяснить себя лучше, я должен администратор):

• Мне нужно было два div, один на другой, которые должны собирать вместе всю высоту страницы и высота которых являются динамическими
• Я не могу прикоснуться к .sidebar css, так как это внешний проект, лучше не менять.

Так что мой последний код - этот, спасибо обоим @MrListerи @Pete для обратной связи (я удалил устаревший тег <center>, как предложено @Pete):

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  padding:0;
  margin:0;
  display: flex;
  flex-flow: column;
}

#titleContainer{
  background-color: blue;
  text-align: center;
}

#contentContainer{
  background-color: red;
  height: 100%;
  position:relative;
}

#sidebar{
  position: absolute;
  left: 6px;
  overflow: hidden;
  width: 40px;
  margin: 0;
  padding: 0;
  top: 6px;
  bottom: 6px;
  background-color: yellow;
  z-index:1000;
}

#sidebar > ul {
  list-style-type:none;
  width:40px;
  margin:0;
  padding:0;
  position:absolute;
}

#sidebar > ul + ul {
  bottom:0;
}

#sidebar > ul > li {
  width:100%;
  overflow:hidden;
  height:40px;
  background-color: red;
}

#page{
  background-color: green;
  height:100%;
  width:100%;
  position:absolute;
}

<div id="titleContainer">
  <h2>
  TITLE
  </h2>
</div>
<div id="contentContainer">
<div id="sidebar">
<ul>
  <li>TOP</li>
</ul>
<ul>
  <li>BOTTOM</li>
</ul>
</div>
<div id="page"></div>
</div>