Table height 100% difference between Firefox and Chrome - html

Question

I've a table inside another table in HTML/CSS - and I want the inside table be at height 100% of the surrounding table cell.
Something like that (the pink table has 100% of the height):
That works fine in Firefox - but in Chrome I get this:
The code for both is:
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to keep it simple.
But who gets it wrong? FF or Chrome? And how can I talk Chrome into drawing the inside table 100% in height?

Answer 1

So, you want the table with class table-base to have 100% the height of the other table, that's right?
If so, I defined the height to 100% on that class.
.largeNumber {
font-size: 10.5em;
line-height: 1;
}
.table-base {
display: table;
border-collapse: collapse;
width: auto !important;
margin: 0 auto;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
<div class="table-base" style="border: 1px solid black;">
<div class="table-row">
<div class="table-cell">
<span class="largeNumber">cell1 in t1</span>
</div>
<div class="table-cell" style="vertical-align: middle;height: 100%; border: 2px dashed green;">
<div class="table-base" style="border: 3px solid pink; height: 100%;">
<div class="table-row">
<div class="table-cell"><span style="color:red">cell1 in t2</span>
</div>
</div>
<div class="table-row">
<div class="table-cell"><span style="color:blue">cell2 in t2</span>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps.
Regards