基于高度的CSS容器查询失效问题排查及无JS方案咨询

核心错误：容器类型设置不匹配 #

你当前给.container设置的container-type: inline-size仅监听内联方向（宽度）的容器尺寸变化，而基于高度的容器查询属于块级方向，自然无法触发。这并非WebKit引擎不支持——Safari 16.3和Chrome 113均已完全支持基于高度的容器查询特性。

修正方案 #

将容器的container-type修改为size（同时支持内联/块级方向的尺寸查询），或直接设置为block-size（仅监听块级方向，即高度）：

body {
    margin: 0
}

.container {
    height: 50vh;
    /* 替换inline-size为size，同时支持宽高查询 */
    container-type: size;
    /* 若仅需高度查询，也可设置为container-type: block-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;
    }
}

修改后，当屏幕高度≤500px时，.container的高度为250px（50vh），触发@container (max-height: 250px)规则，内部方块会变为红色，同时容器背景变为蓝色，完全符合你的预期。

无JS的动态容器尺寸适配方案 #

如果最终产品中用户可调整容器尺寸（比如通过拖拽等方式），只要确保容器满足以下条件，就能纯CSS实现响应：

• 容器设置了正确的container-type（size或block-size）
• 容器拥有明确的尺寸约束（比如固定高度、百分比高度、vh单位高度等，或通过内容撑开的明确高度）

这样容器的高度变化会被自动监听，对应的容器查询样式会实时生效，无需JavaScript介入。

内容的提问来源于stack exchange，提问作者Tim Nikischin