Chrome中多元素应用条件式border-radius时失效问题

我在测试一套基于CSS变量实现的动态圆角方案，核心逻辑是让元素在全屏容器时自动去掉圆角，在窄容器时保留圆角。

核心SCSS代码 #

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;
}

正常工作场景 #

当页面中只有1-2个容器时，--radius-clamp和--radius-max在Chrome和Firefox中都能正常工作：

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

Chrome中的异常问题 #

当容器数量超过2个时，Chrome里的全屏box会出现不该有的圆角：

<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>

此时只有手动把视口缩到极窄，圆角才会消失，而Firefox中没有这个问题。

内容的提问来源于stack exchange，提问作者wcDogg