Consider the following document:

<div class="flex-container">
  <table>
    <thead>
      <tr>
        <th>col</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>the quick brown fox jumps over the lazy dog</td>
      </tr>
    </tbody>
  </table>
</div>

td {
  white-space: nowrap;
}

.flex-container {
  display: inline-flex;
  flex-direction: column;
}

If we toggle the visibility of the <tbody> (or remove the node) then the size of the table is not recalculated. Then, toggling the inline-flex style on the container div will force its size to be recalculated correctly.

JsFiddle reproduction: https://jsfiddle.net/no4s7jhb/2/

Steps:
1. Click "toggle" to hide the tbody. Table size stays the same.
2. Click "force layout" and observe that the table size is recalculated.

Occurs in Safari Technology Preview 16.4 (and probably earlier). Chrome 110 and Firefox 110 recalculate the table size correctly.