Absolutely positioned Divs -> Prevent parent overflow and instead change left/right offset

Question

As you can see, the box containing all the "TEST"s has position absolute. I would like to achieve that if the box would cause the table to be scrollable, instead it should just have an increased offset to the right. Same for the left side. In that case, the offset to the left should be increased so that it sticks to the side and never causes parents to overflow.

How can I achieve this? I am thinking of some JS Code that checks if this menu causes the parent (table) to be scrollable vertically, and then adjust the right: 123px property until it doesnt.

Here is an example where you can see the problem on Tailwind Playground: https://play.tailwindcss.com/QUoCPDRV2u

And here is very same code to reproduce the problem, it requires the usage of Tailwind though:

<table class="table w-full">
  <thead class="bg-red-100">
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th class="relative">
      Heading 5

      <div class="bg-blue absolute w-64 rounded-md border p-2">Absolutely positioned. This should not cause the table to be scrollable, but instead increade the offset to the right to stick on the right edge of the table, all while everything is still in the viewport.</div>
    </th>
  </thead>

  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>