Check out the HTML structure provided below:
<div>
<div class="custom-bar custom-bar-minimal"></div>
</div>
<div class="custom-border">
<div class="container"></div>
</div>
Here's the corresponding CSS:
.custom-bar { height: 50px; }
.custom-bar-minimal {height: 25px; }
.container { height: ~"calc('100vh - 50px')"; }
The goal is to adjust the height of the container when using the custom-bar-minimal class.
I've already attempted this method:
div:has(.custom-bar) + .custom-border .f8-wi-container {
height: ~"calc('100vh - 50px')";
}
div:has(.custom-bar-minimal) + .custom-border .f8-wi-container {
height: ~"calc('100vh - 25px')";
}
If anyone has a solution, I would greatly appreciate it. Thank you!
:has selector does not seem to be effective in this scenario.