CSS容器查询（aspect-ratio）失效问题求助

你的容器查询代码无效的核心问题有两个：

1. 容器查询无法直接选择容器本身：@container规则的作用域是容器的内部后代元素，你在查询里直接写.cont，浏览器会在容器内部寻找该类名的元素，而容器本身不在这个内部上下文里，所以规则不会生效。
2. 错误修改container-type为inline-size：aspect-ratio需要容器同时提供宽和高信息，只有container-type: size才能满足，inline-size只提供行内方向（宽度）的尺寸，无法计算宽高比，这会导致查询条件完全失效。

修正方案一：使用:scope伪类（无需修改HTML） #

:scope伪类可以指代容器查询的当前容器根元素，直接作用于容器本身：

.cont {
  container-type: size;
  width: 80vw;
  height: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.a,.b {
  max-width: 1rem;
}

@container (aspect-ratio > 1 / 1) {
  :scope { /* 用:scope指代当前容器 */
    flex-direction: row;
  }
}

修正方案二：调整HTML结构（兼容性更好） #

如果担心:scope的浏览器支持，可以在容器内部新增一个子容器，把flex布局逻辑转移到子容器上，容器查询作用于这个子元素：

修改后的HTML #

<div class="cont">
  <div class="inner">
    <div class="a">A</div>
    <div class="b">B</div>
  </div>
</div>

修改后的CSS #

.cont {
  container-type: size;
  width: 80vw;
  height: 2rem;
}

.inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%; /* 确保子容器占满父容器高度 */
}

.a,.b {
  max-width: 1rem;
}

@container (aspect-ratio > 1 / 1) {
  .inner {
    flex-direction: row;
  }
}

验证一下：当视口宽度足够大，容器的宽高比大于1时，flex布局会切换为横向排列，符合你的需求。

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