Conditional border-radius stops working in Chrome when applied to multiple elements

Question

Here's a Codepen demonstrating the issue: https://codepen.io/wcDogg/pen/poGXbej

In my CSS, I'm testing:

html {
  --radius: 2rem; 
  --radius-max: max(0px, min(var(--radius), calc((100vw - 4px - 100%) * 9999)));
  --radius-clamp: clamp(0px, calc(100vw - 100%) * 9999, var(--radius));  
}

.box {
  min-height: 200px;
  background-color: lightblue;
  border-radius: var(--radius-clamp);  
}

.content { 
  margin: 2rem 0; 
}

.content__narrow { 
  width: 420px; 
  margin: 2rem auto;
}

Both --radius-clamp and --radius-max work as expected in Chrome and Firefox when there are one or two containers on the page.

<section class="content content_full">
  <div class="box"></div>
</section>
<section class="content content__narrow">
  <div class="box"></div>
</section>

The problem happens in Chrome when more than two containers are used. Then full-width boxes start with a radius that shouldn't be there.

The condition to remove the radius does trigger, but only after manually resizing the viewport to something very narrow.

This problem doesn't happen in Firefox.

<section class="content content__full">
  <div class="box"></div>
</section>
<section class="content content__narrow">
  <div class="box"></div>
</section>
<section class="content content__full">
  <div class="box"></div>
</section>

Any help would be much appreciated :)