Авто переполнения в таблице _td_, которая не имеет определенной высоты

Question

У меня есть таблица с фиксированной высотой, в которой одна строка имеет фиксированную высоту, а другая получает высоту влево, и мне нужно получить полосу прокрутки в гибкой строке, когда ее внутреннее содержимое высокое.Можно ли это сделать?

<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: изменен код на более явный.Мне нужно переполнение: авто на моем желтом блоке.После вставки большого количества содержимого высота таблицы превышает 300px

Answer 1

См. Рабочий пример

---

Помещение div в гибкое td и настройка его свойства overflow должны помочь:

<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

Вот рабочее решение: поместите div внутри TD, и удалите остальные "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>

РЕДАКТИРОВАТЬ: я увидел проблему: он работает только на ХРОМЕ, а не на FIREFOX!

jsFiddle