Overflow: auto in Firefox not working the same as in Chrome - html

Question

Depending on where you open this HTML, you will see the vertical scroll bar. In Chrome the table doesn't exceeds 180 pixels it has a height. However, in Firefox it expands and exceeds the 180 pixels it has as height. The div with id detailFee has the style of overflow: auto and the height and width are 100%. Is there any solution so the table in Firefox has the same look as Chrome?
Firefox
Chrome
<style>
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
</style>
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
<tbody>
<tr height="100%">
<td>
<div id="detailFee">
<table
style="height: 100%"
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<thead>
<tr height="19px">
<td
style="width: 15px; flex-flow: column nowrap; display: none"
nowrap=""
align="center"
>
+
</td>
<td
style="width: 15px; flex-flow: column"
nowrap=""
align="center"
>
-
</td>
<td width="60%" nowrap="" align="left">Test</td>
<td width="110px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
</tr>
</thead>
<tbody>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
<td nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>

Answer 1

Edit:
Here I have the same result in Chrome, Safari, Opera and Firefox
body{
position :absolute;
}
table{
border-collapse: collapse;
}
#mainContainer{
height:180px;
overflow-y: scroll;
}
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
Try to put the main table inside a "mainContainer" div like this...
<div id="mainContainer">
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
And at the end of your html :
</table>
</div>
</body>
</html>
Have a nice day.