CSS @container查询能否基于内容动态高度生效？

一、能否基于内容动态高度触发容器查询？ #

不行。原因如下：

• 容器查询的触发条件依赖容器自身的格式化尺寸，如果容器未设置固定高度（默认auto），容器会自动拉伸适配内容，此时容器高度始终等于内容高度，无法通过min-height/max-height检测“内容超出容器”的状态——容器永远不会被内容撑爆，只会跟着内容变大。
• 若给容器设置固定高度（如height: 200px），容器查询的尺寸就是这个固定值，依然无法直接检测内容是否超出容器高度，因为查询条件只关注容器自身尺寸，不涉及内容与容器的相对关系。

容器查询的核心用途 #

容器查询（@container）是媒体查询的补充，设计目标是基于父容器尺寸而非视口尺寸，调整内部元素样式。比如：

• 同一卡片组件在窄侧边栏用垂直布局，在宽主内容区用水平布局；
• 根据容器尺寸调整文字大小、按钮排列方式等内部排版。
  它让组件能根据所处容器环境自适应，而非仅依赖浏览器窗口大小。

二、能否在容器查询中修改容器自身的样式？ #

可以，但要注意避免循环依赖问题。

你的代码中，容器上下padding各50px，即便短内容，容器实际高度也已超过50px，导致@container pillPop (min-height: 50px)条件始终成立，背景一直是黄色，而非仅长内容时触发。

若要实现“长内容时容器变黄”的效果，可给容器设置最大高度阈值：

#container{ 
  background:#DDD; 
  padding:50px; 
  border-radius:500px; 
  width:300px;
  max-height: 200px; /* 设定最大高度阈值 */
  overflow: hidden; /* 超出部分隐藏 */
  container: pillPop / size;
}

@container pillPop (min-height: 200px){
    #container{background:yellow;}
    b{color:red}
}

当内容撑满容器max-height（200px）时，容器高度达到阈值，触发查询切换样式。但这种方式需要提前设定最大高度，无法完全适配内容的“自然溢出”。

如果要完全基于内容高度动态触发（无需预设阈值），目前纯CSS无法实现，仍需借助JS检测容器scrollHeight是否大于clientHeight，再添加对应样式类。

完整示例代码 #

HTML

<div id='container'> Short <b>content</b> </div>

CSS

#container{ 
  background:#DDD; 
  padding:50px; 
  border-radius:500px; 
  width:300px;
  max-height: 200px;
  overflow: hidden;
  container: pillPop / size;
  transition: background 0.3s;
}

@container pillPop (min-height: 200px){
    #container{background:yellow;}
    b{color:red}
}

JS

// 切换长短内容
let i = true
setInterval(function(){
  document.getElementById('container').innerHTML = i 
    ? "Lorem ipsum dolor sit amet. Vel nihil optio est dolor earum non explicabo ducimus. Qui fuga sunt quo nemo veritatis ad eaque animi. Id quis quisquam et sequi repudiandae ea deserunt vero sed aliquam eligendi non culpa quos. Vel vitae impedit aut corrupti quisquam ab molestias veritatis qui earum odio! Sit quaerat dolores 33 omnis laboriosam est labore quod." 
    : "Short <b>content</b>"
  i = !i
},1000)

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