Automatic overflow in table _td_, which does not have a specific height

Question

I have a table with a fixed height in which one row has a fixed height and the other has a height, and I need to get the scroll bar in a flexible row when its internal content is high. Can this be done?

<table style="width: 50%; height: 300px; overflow:auto"> <tr> <td style="height: 50px;background:grey"></td> </tr> <tr style="overflow:auto"> <td style="background:yellow; overflow:auto"> <script> for (i = 0; i <= 30; i++) { document.write(i + " Sample text<br>"); } </script> </td> </tr> </table> 

UPD: changed the code to more explicit. I need overflow: auto on my yellow block. After inserting a large number of content tables, the height exceeds 300 pixels

Answer 1

See working example.

---

Insert a div inside flexible td and setting its overflow property should do the trick:

 <table style="width: 50%; height: 300px; overflow:auto"> <tr> <td style="height: 50px;background:grey"></td> </tr> <tr style="overflow:auto"> <td style="background:yellow;"> <div style="height: 500px; overflow:auto; overflow-x:scroll; overflow-y:scroll;"> high content </div> </td> </tr> </table> 

Answer 2

Here's a working solution: put the div inside the TD and remove the rest of the " overflow:auto ".

 <table style="width: 50%; height: 300px; "> <tr> <td style="height: 50px;background:grey"></td> </tr> <tr> <td style="background:yellow;"> <div style="overflow:auto;height:100%;"> <script> for (i = 0; i <= 300; i++) { document.write(i + " Sample text<br>"); } </script> </div> </td> </tr> </table> 

EDIT: I saw a problem: it only works on CHROME, not on FIREFOX!

jsFiddle