How can Firefox shows a scrollbar inside a cell table?

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

Solution

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) Use table-layout:fixed to the table c) Use height:100% to the tr d) Use a display:inline-block div inside the td (this is for ie to work) e) use an absolutely positioned element with overflow:auto on that.

Here is a working fiddle: https://jsfiddle.net/Ls6go1g4/