在物化CSS框架中，当我将可滑动添加到选项卡时，每个选项卡内的内容都会被切断

如何解决在物化CSS框架中，当我将可滑动添加到选项卡时，每个选项卡内的内容都会被切断

如果我设置了swipeable：true，则它会按预期运行，而不是每个选项卡中的内容都被截断为500px左右。这是一个7标签系统，可能需要成千上万个像素。如何显示所有内容？如果我将swipeable：false设置为正确显示内容。我

这是我的html '''

//npm.pkg.github.com/:_authToken=this-is-some-fake-token
@namespace:registry=https://npm.pkg.github.com/

''' 这是我的JavaScript： '''

 <div class="container">
        <div class="row">
          <div class="col s12">
            <ul class="tabs z-depth-1">
              <li class="tab hoverable"><a class="active" href="#overview">Overview</a></li>
              <li class="tab hoverable"><a href="#equipment">Equipment</a></li>
              <li class="tab hoverable"><a href="#site_logistics">Site Logistics</a></li>
              <li class="tab hoverable"><a href="#preparation">Preparation</a></li>
              <li class="tab hoverable"><a href="#job_scope">Scope</a></li>
              <li class="tab hoverable"><a href="#safety">Safety</a></li>
              <li class="tab hoverable"><a href="#internal">Internal</a></li>
            </ul>
          </div>

          <div id="overview" class="col s12"> blah blah blah </div>
          <div id="equipment" class="col s12"> blah blah blah </div>
          <div id="site_logistics" class="col s12"> blah blah blah </div>
          <div id="preparation" class="col s12"> blah blah blah </div>
          <div id="job_scope" class="col s12"> blah blah blah </div>
          <div id="safety" class="col s12"> blah blah blah </div>
          <div id="internal" class="col s12"> blah blah blah </div>
        </div>
     </div

'''