Canvas Three.js选项卡内的画布不包含父元素的全宽和全高

我在选项卡容器中使用Three.js画布，但由于某些未知原因，3D视口没有包含父元素的全部宽度和高度

@描述

我有两个选项卡第一个选项卡在第二个选项卡中处于活动状态，我有3D视口（画布）

测试1
测试3
测试4

（VW）单位在CSS代码上我只是说要使用的父宽度

#画布3D{

宽度：calc（100vw-60px）； 高度：计算（100vh-60px）

}

我希望有人能帮忙：）

  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">
      <div id="canvas3D"></div>
    </div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>