css @container 容器查询 查询高度不生效？

Question

直接上 codepen demo
codepen

我希望能查询 container 元素的高度，高度超出指定高度后改变背景色但是没生效，完整代码如下

<template>
  <div id="app">
    <div class="container">
      <div class="item" v-for="item in data" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15]
    };
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
  #app {
    width: 210px;
    height: 24px;
    overflow: hidden;
  }
 .container {
   container: container / inline-size;
   display: flex;
   flex-wrap: wrap;
   margin-right: -20px;
}
  .item {
    padding: 5px 10px;
    margin-right: 20px;
    font-size: 12px;
    background: #eee;
    border-radius: 3px;
  }
  @container container (height > 24px) {
    background: #eee !important;
  }
</style>

@container 兼容性一般，建议用最新版本的 chrome/safari/firefox 打开

Answer 1

@Controller 不是选择器呀，它和媒体查询 @media 一样，只是匹配条件，选择器还是要自己写的

题主的写法：

@container container (height > 24px) {
    /*没有选择器*/
    background: #eee !important;
}

正确写法：

@container container (height > 24px) {
    .item {
        background: #eee !important;
    }
}

这个术语叫做 at-rules，官方描述是：

At-rules are CSS statements that instruct CSS how to behave
At规则 是一个 CSS 语句，用来指示 CSS 如何运行

官方文档参考：

At-rule

Answer 2

试试这个语法：

https://codepen.io/Lionad/pen/abQQYPL

---

见 MDN 文档，楼主应该是忘记给 container 命名了，所以用 container-type 有效，但是直接用 container 无效。