Css 如何根据不同类别更改另一个容器的高度

我有下面的Html结构

<div>
   <div class="experimental-bar experimental-bar-minimal"></div>
</div>
<div class="experimental-border">
   <div class="container"></div>
</div>

我想在调用实验条最小类时更改容器的高度

我用过

div:has(.experimental-bar) + .experimental-border .f8-wi-container {
  height:  ~"calc('100vh - 50px')";
}
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container {
  height:  ~"calc('100vh - 25px')";
}

有人能帮我吗。提前谢谢

：has不工作

没有选择器，它只选择父节点的直接子节点。有关更多信息，请阅读

实际上是：has伪类，其工作原理与下面的代码类似，但目前任何浏览器都可以使用它：

.parent:has(> child) {
    /* Style Rules */
}

---

@zer00ne yes calc工作正常，如果我使用。实验边界。唯一的问题是选择父级，然后选择相邻的选择器：has不工作。即使我使用.parent:has.class-x{}我知道，我甚至在回答中用粗体字提到了为什么它目前不起作用！

.parent:has(> child) {
    /* Style Rules */
}