在固定高度表中的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中的行可以滚动，而表格不会超过红色区域。页面必须在所有屏幕格式上都可读，因此所有内容都必须使用百分比来完成。我试着喘着粗气，但桌子仍然长得太大了。

你对我有什么建议吗？谢谢！

更新

这就是我现在所得到的：

但我想看到这个：

Answer 1

此处您有更新的jsfiddle

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