Twitter bootstrap 选项卡内容不可用'；不要占了所有的位置

我使用引导4，我有一个左菜单。 单击一个元素时，会显示一个选项卡

我做了一个ajax调用来获取thymeleaf片段

选项卡内容不会占用所有空间

<div class="container-fluid h-100">
   <div class="row h-100">

      <div class="col-lg-2 my-auto">
         <div th:replace="fragments/left-menu :: LeftMenu('none')"></div>
      </div>

      <div id="main" class="col-lg-10 main">
         <ul class="nav nav-tabs" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" data-toggle="tab" href="#productTypesTabs" th:text="#{productTypes}">Product Types</a>
             </li>
         ...
         </ul>

         <div class="tab-content">
             <div id="productTypesTabs" class="container tab-pane active"><br>
                 <div id="productTypesFragment"></div>
             </div>   
             ....
         </div>

      </div>
      ....

   </div>

</div>

...



....
....

productTypesFragment片段的内容

---

不明白为什么它不占用所有空间？

问题在于类容器

改变

<div id="productTypesTabs" class="container tab-pane active"><br>
    <div id="productTypesFragment"></div>
</div> 

到

<div id="productTypesTabs" role="tabpanel" class="tab-pane active"><br>
    <div id="productTypesFragment"></div>
</div>