HTML、CSS：テーブルを垂直スクロール可能にする

Question

AJAXリクエスト（vue.jsを使用）の後に動的に作成されるテーブルがあります。列の数と各列の幅が計算されます。

テーブルに十分なスペースがないときには垂直スクロールバーが必要ですが、style="width: 600px; overflow-x: scroll"を設定してもスクロールバーが表示されず、ヘッダー要素がラッパーdivとテーブルの幅行がクリップされます。

HERESに私の関連するコード（ブートストラップを使用してvue.js 2）：

<div class="panel-body" id="datatable"> 
     <table class="table data-table" id="datatable-content"> 
      <thead class="datatable-head" id="datatable-head"> 
       <tr> 
        <th v-for="value in tableHeader" v-text="value"></th> 
       </tr> 
      </thead> 

      <tbody class="datatable-body" id="datatable-body"> 
       <tr v-for="row in tableRows"> 
        <td v-for="key in tableHeader" v-html="highlightFilterString(row[key])"></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

とCSS：

.data-table { 
     overflow-x: scroll; 
     display: block; 
     width: 100%; 
    } 
    .datatable-body { 
     display:block; 
     height: calc(100vh - 118px);/ 
     overflow-y: scroll; 
     overflow-x: hidden; 
    } 
    .datatable-head { 
     display:block; 
     overflow-x: scroll; 
    } 
    .datatable-head, .datatable-body tr { 
     min-width: 100px; 
     text-align: center; 
    } 
    .datatable-body td { 
     min-width: 100px; 
     text-align: center; 
    } 
    .datatable-head th { 
     min-width: 100px; 
     text-align: center; 
    } 

ここでの問題は何ですか？

Answer 1

私はoverflow-x要素をコメントアウトしましたが、今は正常に動作しているようです。静的なHTMLコンテンツ

https://jsfiddle.net/v7qpot2b/

.datatable-body { 
     display:block; 
     height: calc(100vh - 118px);/ 
     overflow-y: scroll; 
     /* overflow-x: hidden; */ 
    }