display:table-row does not work in browsers except FireFox - html

Question

I am using this code which works fine in Firefox, but not in Chrome, Edge, IE11. The problem seems to be related to display:table-row.
The yellow sidebar with the red buttons should stay at the same height of the green area. This is true in FireFox but not eslewhere.
Is there anyway I can change it to make it more supported?
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

Ok so I achieved the same functionality as in my example, but with support for the other browsers as well by removing the display:table and using display:flex instead. My main problems were actually (I should have explained myself better I must admint):
I had to have two divs, one on another, which should take together whole the page height and whose height are dynamic
I cannot touch the .sidebar css, as it is an external project I'd better not change.
So my final code is this one, thanks both to #MrLister and #Pete for the precioud feedback (I removed the obsolete <center> tag as suggested by #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>