Using Container Query Units Relative to an Outer Container
Briefly

Matt Wilcox highlights an issue with container queries in web design—specifically, the challenges posed by nested containers. He points out that when using container query units, the dimensions of the inner containers do not allow designers to reference outer containers, leading to confusion and design complications. He underscores the need for a method to target the outer container's dimensions from within the inner container, suggesting a specific CSS setup that may mitigate these challenges, as the units currently default to the inner container's dimensions, which is not always desirable.
The sudden limitations encountered when using container queries become apparent with nested containers. You lose relative calculation abilities, which complicates layout design significantly.
If the inner-child elements cannot refer back to the outer-container's dimensions, designers face restrictions that can stifle the responsiveness of their designs.
Read at Frontendmasters
[
|
]