Here it is the most minimal code that still highlights the Firefox behavior (In Chrome and IE the scrollbar is shown as expected)
<html>
<body>
<table style="width:100%; height:100%;">
<tbody>
<tr>
<td style=" width: 75%; height: 100%; vertical-align: top; background-color: #FFE4C4;">
<div style=" width: 100%; height: 100%; overflow: auto;">
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
<div> 1 __________________ line </div>
</div>
</td>
<td style="background-color: #DEB887;"> <div> . </div> </td>
</tr>
</tbody>
</table>
</body>
</html>Any hint to have it working even in FF ? Many Thanks
The structure you are using is wrong for what you want it to do. Tables and table-cells main functionality is to expand according to content, so it would be for the best if you used a different layout-styling for this, for example a relative parent with 100% height and an absolutely positioned child inside of it with 100% height and
overflow:auto.This said, what you are trying to achieve would be the following:
a) First of all add html, body to
height:100%b) Usetable-layout:fixedto the table c) Useheight:100%to the tr d) Use adisplay:inline-blockdiv inside the td (this is for ie to work) e) use an absolutely positioned element withoverflow:autoon that.Here is a working fiddle: https://jsfiddle.net/Ls6go1g4/