基于高度的容器查询不起作用

Question

我想在现代 Safari/Chrome 浏览器中使用新的 CSS 容器查询。（Safari 16.3、谷歌浏览器 113.0）

但是，基于高度的容器查询并未按预期工作。

预期结果：一旦外部容器变成蓝色（500px 屏幕高度或以下），我预计粉色方块（500px 容器的 50vh）就会变成红色。

当前结果：正方形保持粉红色并且不会变成粉红色。如果实现是相对宽度的，则该示例有效。

我在实现中是否做错了什么，或者只是没有在 Webkit 引擎中实现 jet ？如果在最终产品中用户可以调整容器的大小，还有其他解决方案（不使用 JavaScript）来解决该问题吗？

body {
    margin: 0
}

.container {
    height: 50vh;
    container-type: inline-size;
}

.test {
    width: 250px;
    height: 250px;
    background-color: hotpink;
}
            
@container (max-height: 250px) {
    .test {
        background-color: red;
    }
}
            
@media screen and (max-height: 500px) {
    .container {
        background: blue;
    }
}

<div class="container">
    <div class="test"></div>
</div>

Answer 1

inline-size是宽度而不是高度。你必须使用size

inline-size

查询将基于容器的内联尺寸。将布局、样式和内联大小包含应用于元素。^参考

body {
    margin: 0
}

.container {
    height: 50vh;
    container-type: size;
}

.test {
    width: 250px;
    height: 250px;
    background-color: hotpink;
}
            
@container (max-height: 250px) {
    .test {
        background-color: red;
    }
}
            
@media screen and (max-height: 500px) {
    .container {
        background: blue;
    }
}

<div class="container">
    <div class="test"></div>
</div>