<pre> within table cell ignores width constraints

I have the following HTML. This should display a table with a maximum width of 1024px in the middle of the screen. The table should contain two columns and two rows. The first column should have a fixed width of 100px, the second column should take up the remaining width of the table. When I use white-space: pre-wrap; (commented out here) everything looks perfect. The <pre> block takes up only as much width as the column has, until the table's maximum width of 1024px, everything's fine. Only thing is, I don't want the text to be wrapped.

What I want is that the <pre> block would take up only the available width (as before), but when the containing text exceeds that width, it should not wrap nor should it grow horizontally, but it should display a horizontal scrollbar so I can scroll left-right. And that's were the problem lays:

I removed the white-space: pre-wrap; and added overflow-x: auto; instead (also tried it with width: 100%;), and instead of the <pre> block taking up the same width and just showing a scrollbar, it resizes the whole table column to the size it wants, ignoring the maximum width of the table, etc.!

I found out, that setting either the <pre> or the <div> it's contained in or the column it's contained in to a fixed width, solves the problem of the <pre> block taking up too much space. But that's not an option here, because I need the second column to still be flexible in its width.

So how would I be able to get this to work? I seem to have tried everything and nothing works with the flexible column width, no matter if I set something on the column, the surrounding <div> or the <pre> itself.

.table td {
  padding: 1rem;
}

.table td p:last-child {
  margin-bottom: 0rem;
}

pre {
  padding: 8px;
  /*white-space: pre-wrap*/
  overflow-x: auto;
  width: 100%;
}

.my-div {
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

<div class="container">
  <table class="table table-responsive table-striped mx-auto mt-3" style="max-width: 1024px;">
    <colgroup>
      <col style="width: 100px;" />
      <col />
    </colgroup>
    <tbody>
      <tr />
      <tr>
        <td>Some Text</td>
        <td>
          <div class="my-div">
            <p>Some text will be displayed here.</p>
          </div>
        </td>
      </tr>
      <tr>
        <td>Other Text</td>
        <td>
          <div class="my-div">
            <p>Some text before the code block</p>
            <div style="color:#DADADA;background-color:#1E1E1E;">
              <pre>
<span style="color:#569CD6;">&lt;</span><span style="color:#A31515;">p</span><span style="color:#569CD6;">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed eleifend erat. Nulla facilisi. Fusce gravida magna dignissim nisl pellentesque, ac euismod augue semper.<span style="color:#569CD6;">&lt;/</span><span style="color:#A31515;">p</span><span style="color:#569CD6;">&gt;</span>
</pre>
            </div>
            <p>And some text after the code block</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

You can probably achieve the desired result, by adding table-layout:fixed to the table.

It can have a few more implications on how your table renders, https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout - but I think here it is the only way to achieve what you want.