html - 在固定高度表的 td 内滚动 div

Question

问题:https://jsfiddle.net/sjefb/xctr0zve/1/

<div style="height: 500px; border: 1px solid red">
  <table border="1" id="table1">
    <tr>
      <td id="td1"></td>
    </tr>
    <tr>
      <td id="td2">
        <div>
          testtest
        </div>
      </td>
    </tr>
    <tr>
      <td id="td3">
        <div id="div1">
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
          <div>
            test
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

CSS:

    #table1 {
      height: 100%;
      width: 100%;
    }

    #td1 {
      height: 40vh;
      width:100%;
      min-height: 240px;
    }

    #td2 {}

    #td3 {
      height: 60%;
      overflow: hidden;
    }

    #div1 {
      overflow: auto;
      height: 180px;
      /*works, not what I want*/
      height: 100%;
      display:block;
      /* doesn't work*/
    }

我希望 td3 中的行滚动，并且表格不超过红色区域。这些页面必须在所有屏幕格式上都是可读的，所以一切都必须使用百分比来完成。我试着吹啊吹，但 table 还是变得太大了。

你有什么建议给我吗？谢谢!

更新

这是我目前得到的:

但我想看到这个:

Answer 1

这里有一个更新的 jsfiddle

#div1 {
  height:100%;
  overflow-y: scroll;
}