0

With CSS container queries now being supported by all major browsers, I wanted to integrate this new feature into my project. However, I quickly came across a problem and sadly information on this topic is still very hard to come by.

The way these are supposed to work, is that you can style descendants of an element based on the size of a container. However, I want to achieve the opposite effect: style a parent or "outside" element based on the size of a contained element.

Consider the following example, in which the style gets applied to the child, but not to the parent:

.parent{
  background-color: blue;
  width: 500px;
  height: 500px;
}
.container{
  container-name: test;
  container-type: size;
  background-color: grey;
  width: 300px;
  height: 300px;
}
.child{
  background-color: red;
  width: 100px;
  height: 100px;
}
@container test (min-height: 50px) {
    .child {
      background-color: green;
    }
    .parent{
      background-color: green;
    }
} 
<div class="parent">

  <div class="container">

    <div class="child"></div>

  </div>

</div>

From what I understand, this behavior is expected from the spec. However, if anyone knows how this could possibly work it would be greatly appreciated. Maybe there is a trick to it that I have not thought of or considered.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Ood
  • 1,445
  • 4
  • 23
  • 43
  • Think about the why: if you are able to change the style of the parent (or any other parent) you can affect the style you are using inside the container query which will lead to an infinite loop – Temani Afif Aug 25 '23 at 00:27
  • @TemaniAfif Correct me if I'm wrong, but the infinite loop problem could occur when resizing the child just as well as when resizing the parent. For example by using 2 container queries and a parent/container that fits itself to the child that is being resized. – Ood Aug 25 '23 at 02:18
  • 1
    when you make an element a container, its content no more contribute to its height/width so you cannot have an infinite loop https://stackoverflow.com/a/73980194/8620333 – Temani Afif Aug 25 '23 at 09:13

0 Answers0