容器查询中使用min-height及逻辑运算符的问题排查

你遇到的问题核心在于容器类型的限制：

• 你给.wrapper设置的是container-type: inline-size，这种容器只会追踪内联方向的尺寸变化（对应水平方向的width/inline-size），完全忽略块级方向的尺寸（比如height/block-size）。
• 当你在容器查询里加入(min-height: 0px)这个条件时，由于inline-size容器不感知高度，这个条件会被判定为不成立，导致整个@container规则失效，所以红色背景的样式根本没被应用，最终显示的是上一条绿色背景的规则。

有两种可行的修复方式：

1. 替换容器类型为size #

如果确实需要基于容器的高度做查询，把container-type改成size，它会同时追踪内联和块级方向的尺寸：

.wrapper {
  width: 300px;
  container-name: wrapper;
  container-type: size; /* 替换成size类型 */
}

这样(min-height: 0px)的条件会被正常识别，红色背景的规则就能生效。

2. 移除高度相关的查询条件 #

如果不需要基于高度做判断，直接删掉and (min-height: 0px)部分，规则就会正常触发：

@container wrapper (min-width: 300px) {
  .box {
    background-color: #ff0000;
  }
}

Chrome 112已经支持容器查询的逻辑运算符，但前提是查询的尺寸属性要和容器类型匹配：

• inline-size容器：仅支持width/inline-size相关的媒体特性
• size容器：支持width/height/inline-size/block-size等所有尺寸特性

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