@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">—— 浏览器完全无视 - React/Vue 组件中，确保该 class 或内联样式在首次渲染时就存在，否则 JS 动态插入会导致初始匹配失败
container-type 加在了错误的元素上
常见失效场景是 Flex/Grid 容器的直接子项被当成了容器。Flex/Grid 子项没有独立、可测的尺寸，它的宽度由布局算法动态分配，浏览器查不到值。
正确做法是加一层 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、加错位置、用错单位，三者任一都会让整个查询链断在起点。 
