容器查询（Container Query）高度不生效但宽度正常问题咨询

问题出在你给容器设置的查询轴上：

• 你写的container: box/inline-size;里，inline-size表示容器查询仅监听**行内方向（水平宽度）**的尺寸变化，所以高度相关的查询规则不会被触发。

修复方法 #

把容器的查询轴改成size（同时监听宽度和高度）或者block-size（仅监听高度），两种写法都可以：

写法1：使用container简写属性指定size #

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

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

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

写法2：单独设置container-type属性 #

#box {
  container-name: box;
  container-type: size; /* 同时支持宽高查询 */
  height: 200px;
}

/* 后续查询规则不变 */

补充说明 #

MDN里提到的height容器查询生效的前提是，容器的查询维度包含块级轴（垂直方向，对应高度）。inline-size是容器查询的默认轴，只针对宽度；只有显式指定block-size或size，高度查询才能正常工作。

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