Overflow auto in table _td_ that has no certain height

Question

I have a table with fixed height in which one row has fixed height and another gets height left and I need to get scrollbar in the flexible row when its inner content is high. Is it possible to do?

<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 be more explicit. I need overflow:auto on my yellow block. After inserting a lot of content table height exceeds 300px

Answer 1

See Working Example

---

Putting a div inside your flexible td and settings 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>