css - フレックス コンテキスト内でブートストラップ レスポンシブ テーブルが機能しない

Question

フレックスボックスに基づくサイドバー ( <aside>) とメイン コンテンツ ( ) を備えた単純なレイアウト (常にブラウザー ウィンドウの幅 100%) が必要です。<main>サイドバーの幅は一定で、メイン コンテンツの幅は可変 (ブラウザの残りの幅) です。

メインコンテンツ内に大きなテーブルがあり、レスポンシブテーブルを使用して、テーブルコンテナーでのみ水平スクロールを取得したいと考えています。しかし...うまくいきません。ウィンドウ全体の水平スクロールを取得しました。

<div class="d-flex w-100">
  <aside>some sidebar content</aside>
  <main class="flex-grow-1">
    <div class="table-responsive"> <!-- problem is here! -->
      <table class="table">
        <tr>
          <td>1.Test</td>
          <td>2.Test</td>
          <td>3.Test</td>
          <!-- ... -->
          <td>21.Test</td>
        </tr>
      </table>
    </div>
  </main>
</div>

例: https://jsfiddle.net/cichy380/q34p5j1u/