@container规则生效的前提是直接父元素显式声明container-type: inline-size或size，否则静默忽略；错误位置、无效单位（如em/rem/%）、display:contents/visibility:hidden父元素均导致失效。

父容器没设 container-type，@container 规则直接被忽略

浏览器不会报错，也不会在 DevTools 里提示，@container 规则只是静默跳过。这不是语法问题，也不是浏览器不支持——而是根本没被识别为容器。

必须在**直接父元素**上用 CSS 显式声明：container-type: inline-size（最常用）或 container-type: size（需宽高都稳定）。container-name 单独写没用，不触发查询。

• container-type 不可继承，不能靠 body 或远祖元素“自动升级”
• 别写成 HTML 属性：<div container-type="inline-size"> —— 浏览器完全无视 <li>React/Vue 组件中，确保该 class 或内联样式在首次渲染时就存在，否则 JS 动态插入会导致初始匹配失败</li> <h3> <code>container-type 加在了错误的元素上

  常见失效场景是 Flex/Grid 容器的直接子项被当成了容器。Flex/Grid 子项没有独立、可测的尺寸，它的宽度由布局算法动态分配，浏览器查不到值。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  正确做法是加一层 wrapper，并确保它有稳定尺寸：

  • ❌ 错误：<div class="grid"><div class="card" style="container-type: inline-size"></div></div>
  • ✅ 正确：<div class="grid"><div class="card-wrapper" style="container-type: inline-size"><div class="card"></div></div></div>
  • 如果 card-wrapper 是 flex item，记得加 min-width: 0 或 width: fit-content，否则可能被压缩到 0px 宽
  • 避免用 display: contents 或 visibility: hidden 的父元素设 container-type —— 它们不产生渲染盒，属性彻底失效

  @container 中的单位或尺寸计算出错了

  @container 查的是 content box 的行内可用宽度，不是你写的 width 值，也不受 em/rem 影响。

  • min-width: 320px 匹配的是容器内容区宽度 ≥ 320px；若容器有 padding: 16px 和 box-sizing: border-box，那它的样式 width 至少得是 352px 才能触发
  • 禁用 em、rem、未继承的 em、calc() —— 行为未定义或不兼容
  • % 单位只在父容器宽度明确时才可靠；50% 在宽度由内容撑开的容器里可能恒为 0，慎用
  • 推荐统一用 px，最可控；vw 仅当容器自身有明确 width 时才安全

  用了 @supports 但检测方式不对

  唯一可靠的检测是：@supports (container-type: inline-size)。其他写法如 @supports (@container) 或 @supports (container: inline-size) 全部解析失败，整条规则被丢弃。

  • 检测必须写在 @container 规则外部，不能嵌套在 @media 里
  • 降级样式要包在 @supports not (container-type: inline-size) 块内，否则新旧浏览器都会执行
  • 别写 JS polyfill —— 目前没有稳定方案能正确模拟 container-type 的布局隔离和尺寸监听逻辑
  容器查询真正生效的前提，从来不是“写了 @container”，而是那个父元素是否真的被浏览器当作一个有尺寸、有上下文、有隔离边界的“容器”。漏掉 container-type、加错位置、用错单位，三者任一都会让整个查询链断在起点。