container query with height not work but can adjust with width

Question

jsfiddle demo

Container query width is active but height not woking

#box {
      container: box/inline-size;
      height: 200px;
    }

    @container box (height > 50px) {
      /* not work */
      article {
        background: skyblue ;
      }
    }

    @container box (width > 50px) {
      /* it works */
      article {
        color: blue;
      }
    }

height: The height of the container expressed as a value. width: The width of the container expressed as a value. This is the descprtion from MDN

I think the demo has no problem, it should be able to dynamically display the background color according to the height

Answer 1

I can see you've specified box/inline-size, which would mean the container query will be based on the inline dimensions of the container( which can be thought of as its width also).

You'll have to use size instead of inline-size if you want to base your container query on the height. Something like:

#box {
 container: box/size; /* here */
 height: 200px;
}

@container box (height > 50px) {
 article {
   background: skyblue;
 }
}

@container box (width > 50px) {
 article {
   color: blue;
 }
}

JSFIDDLE