响应的表 Package 器需要知道它的限制。通过管理它周围的元素上的溢出来做到这一点。我已经添加了Bootstrap的overflow-hidden类。
我还在表格上方和下方的行中添加了列，因为它们的负侧边距会导致问题。您可能并不希望在此处使用行。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container-fluid d-flex p-0 wrapper">
  <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 248px;">side bar</div>

  <div class="d-flex flex-column overflow-hidden">
    <div class="row">
      <div class="col">some table controls</div>
    </div>

    <div class="card flex-fill table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
            <th>Column5</th>
            <th>Column6</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>row</th>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="row">
      <div class="col">some pagination controls</div>
    </div>
  </div>
</div>