容器查询不生效的根源是父元素未显式声明container-type: inline-size，该属性必须通过CSS在父选择器中设置，不能写在HTML里，且不继承、不自动启用；它监听的是content box宽度，受padding、border和box-sizing影响，仅支持px等有限单位。
容器查询不生效，90% 的情况是父元素根本没被浏览器识别为容器——@container 规则静默失效，不报错、不警告，只当它不存在。
父容器没设 container-type: inline-size
这是最常见也最隐蔽的错误。CSS 不会自动把任何元素“升级”成容器，container-type 必须显式声明，且不能继承、不能靠 body 或 :root 代劳。
-
container-type: inline-size是目前唯一广泛支持的取值（Chrome 105+、Safari 16.4+、Firefox 110+），监听内容区行内方向可用宽度 - 别写成 HTML 属性：
<div container-type="inline-size">—— 浏览器完全无视；正确写法是 CSS 规则：.card { container-type: inline-size; } - 别用
container-type: size：它要求宽高都稳定，仅 Chromium 117+ 稳定支持，开销大，且 Safari/Firefox 当前不认
容器尺寸被破坏或不可测
@container 查的是内容区（content box）的可用行内尺寸，不是你写的 width 值，更不是 offsetWidth。任何破坏盒模型或压缩尺寸的操作都会让它返回 0px。
- 父元素用了
display: contents或visibility: hidden：它没有渲染盒，container-type彻底失效 - Flex/Grid 容器里子项被压扁：
flex: 1+min-width: 0可能把宽度压到 0，查出来永远不匹配 - 写了
padding: 16px+box-sizing: border-box+width: 352px？那 content box 宽度 = 352px − 32px = 320px，此时才匹配min-width: 320px - 避免用
%、vw、calc()、未继承的em：行为未定义或不兼容；单位只推荐px、ch，或明确有上下文的%（父容器本身有固定尺寸时）
@container 找不到宿主容器
容器查询只认「最近的、已声明 container-type 的祖先」，中间断一层，就彻底失效。React/Vue 组件封装、Fragment、JS 动态插入，都容易造成这层断裂。
立即学习“前端免费学习笔记（深入）”；
- 把
container-type加在body上？它通常不构成独立格式化上下文，声明无效 - 中间某层组件（比如
<Card>）没透传所需的 class，子组件的@container就找不到宿主 - 检查开发者工具的 Elements 面板，确认目标元素的父级链中，确实有一层带
container-type: inline-size的 CSS 规则生效（不是被覆盖、不是 disabled）
container-property 和 style() 配合出错
想用自定义属性传参？限制很硬：必须在同一 CSS 规则里声明，且只能在 @container 中读取。
- 必须写成：
.card { container-type: inline-size; container-property: --gap: 12px; }—— 拆成两条规则就失效 - 声明的属性只能在
@container里通过style(--gap)读取，不能在普通 CSS 里用var(--gap) - 取值必须带单位：
--gap: 12❌（无单位数值部分浏览器不认），--gap: 12px✅
真正卡住人的地方，往往不是语法写错，而是你写的 @container 根本没挂到任何容器上——它就像一封没写收件人地址的信，寄不出去，也收不到退回通知。
