Setting a table's td height not working in Firefox - html

Question

I've got a table with the contents of the cells completely filling them. I gave the content a fixed width and a height of 100% so that elements that get bigger are still able to grow the cells. The cells also have a minimum height via the simple height attribute so the 100% height of the content has an effect. In Chrome and Edge everything works fine, but in Firefox the cells don't grow:
Chrome:
Firefox:
If you want to try yourself:
table {
border-spacing: 8px;
font-size: 14px;
}
td {
height: 50px;
}
td div {
height: 100%;
width: 200px;
background-color: green;
}
<table>
<tr>
<td>
<div>
This div is normal sized.
</div>
</td>
<td>
<div>
This div is normal sized.
</div>
</td>
</tr>
<tr>
<td>
<div>
This div is also normal sized but should size accordingly.
</div>
</td>
<td>
<div>
This div is very very big so it gets higher and should affect other divs in the same row. But not in Firefox apparently.
</div>
</td>
</tr>
</table>
Not sure if this a bug in Firefox or a feature in Chrome, but the way I understood table sizing is that table elements cannot have a fixed size. Instead their width and height attributes are used as a min-width / min-height and they grow according to their content. Is there a quick workaround or should I rebuild the table in flexbox layout?
Update
By the way, when I instead set a fixed height on the row / tr and height: 100%; on the td, it works in Firefox. But then it's broken in Chrome...

Answer 1

I managed to find a workaround. I added the lines
#-moz-document url-prefix() {
tr {
height: 50px; // Your min height
}
td {
height: auto;
}
}
to my css and now it seems to display correctly in firefox and chrome. Not very clean but it works.
Apparently Chrome was to adopt Firefox behaviour with tables in Version 50 but reverted because it broke too many layouts. The trick applying height: 100%; to the tds worked because all percent sizes are automatically translated to auto. Makes much more sense then.