Bootstrap Responsive Table in Auto Grid Layout

I'm trying to add a BS Responsive Table inside of a BS Auto-layout Grid and running into what I believe is a bug. The table is breaking the auto layout columns and forcing them to wrap.

https://stackblitz.com/edit/3p8irhck?file=index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
    ></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code Start-->
    <div class="container text-center">
      <div class="row">
        <div class="col">
          Column
          <div class="table-responsive">
            <table class="table table-striped">
              <tr>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>
    <!-- Example Code End -->
  </body>
</html>

If I add col-4 to the columns it works as expected, but I'd like to avoid having to set explicit column sizes so that I can add and remove items to the layout without having to keep track of how many are used.

https://stackblitz.com/edit/3p8irhck-zxqhikjm?file=index.html

Solution

.col { min-width: 0; } will make the column shrink:

.col {
  min-width: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
    ></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code Start-->
    <div class="container text-center">
      <div class="row">
        <div class="col">
          Column
          <div class="table-responsive">
            <table class="table table-striped">
              <tr>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
                <td>XXXXXX XXX</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>
    <!-- Example Code End -->
  </body>
</html>