How to influence the order of shrinking flex-gap versus text wrapping within flex items?

Issue

Say one has a flex container with a variable size gap:

gap: clamp(20rem, 50%, 40rem);

and this container has two items containing the text A flex item that will wrap at some point.

How might one force the clamped gap value to be reduced to the minimum of the bound before the text in either item begins wrapping to multiple lines? The desire is that text wrapping is the last thing that "gives out" when things get tight.

Constraints:

1. The text content cannot be predicted ahead of time (and may change dynamically after the page has been rendered through third party JS).
2. The container width cannot be predicted ahead of time (and may change dynamically after the page has been rendered through third party JS).
3. The number of flex items cannot be predicted ahead of time (and may change dynamically after the page has been rendered through third party JS).
4. Content may not overflow any containers horizontally.
5. On-page-load JS cannot be used, as it may cause Layout Shifting, which negatively impacts web vitals.

What can be done:

1. Flex is optional! If there's a non-flex way, feel free to advise!

See the following example...

(
  new ResizeObserver(entries => {
    const item_1 = document.querySelector('.item:first-child');
    const item_2 = document.querySelector('.item:last-child');
    const gap = item_2.getBoundingClientRect().left - item_1.getBoundingClientRect().right;
    document
      .querySelector('.read-out')
      .textContent = 'Flex gap: ' + gap;
  })
).observe(document.querySelector('body'));

h2, .read-out {
  text-align: center;
}

.flex-container {
  position: relative;
  display: flex;
  gap: clamp(20rem, 50%, 40rem);
  justify-content: center;
}

.item {
  display: inline-block;
  background: red;
  padding: 1rem;
}

<h2>Goal: Ensure that the 'gap' property reduces down to 320 pixels BEFORE text in either item wraps </h2>
<div class="flex-container">
  <div class="item">A flex item that will wrap at some point</div>
  <div class="item">A flex item that will wrap at some point</div>
</div>
<div class="read-out"></div>

Original design intention:

Solution

Sometimes the truth is disappointing and refusing to accept it will only lead to strife.

I'm convinced that this is not something that can be accomplished by CSS (timestamped 12.18.2023). If anyone can prove otherwise, please post an answer and I will move the accepted status.

Answered By - Luke A. Leber