container query with height not work but can adjust with width

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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