@container 不生效是因为容器未被识别为可查询上下文：需设 container-type: inline-size 且必须配合 contain: size（推荐 contain: layout style size），并确保父元素具有稳定可测宽度、处于BFC中。
写了 @container 却没反应？大概率是容器根本没被浏览器识别为“可查询上下文”——它不是语法问题，而是上下文缺失。
为什么 @container 规则完全不生效
浏览器不会自动把任意父元素当作容器查询上下文。你写了 @container (min-width: 400px)，但样式纹丝不动，通常是因为：
- 父元素没设
container-type，或设成了normal（等同于没设） - 父元素是
display: contents、display: none或position: absolute—— 这些不产生块格式化上下文（BFC），container-type被静默忽略 - 父元素本身宽度不可测：比如是 Flex/Grid 子项且没显式尺寸，或
width: auto且无内容撑开，计算出的宽度为0px - 直接在
display: flex或display: grid的父容器上设container-type—— 它的子项尺寸由布局算法动态分配，不是稳定可测的“容器尺寸”
container-type 该选哪个值
别用 size，除非你明确需要同时响应宽高且已启用实验性 flag。生产环境只推荐：
-
container-type: inline-size—— 响应主轴（通常是宽度），兼容性好、性能稳定，99% 场景够用 - 避免
container-type: size：触发重排开销大，Chromium 117+ 才支持，且需手动开启 flag - 不要写
container-type: block-size单独查高度 —— 没设contain: size时，高度永远查不到
简写形式 container: card / inline-size 等价于同时设 container-name: card 和 container-type: inline-size，命名非必需，但多个嵌套容器时能避免误匹配。
立即学习“前端免费学习笔记（深入）”；
容器必须带 contain: size 吗
必须。只写 container-type: inline-size 不足以激活查询；contain: size 是最低要求，它隔离尺寸计算，防止子元素撑破容器导致测量失真。
-
contain: layout style size是更稳妥的写法，比单写size更少意外 -
contain: content不行 —— 它不包含尺寸隔离，@container仍静默失效 - 如果容器本身是 Flex 子项，记得加
min-width: 0或width: fit-content，否则min-width: auto会锁死收缩
调试时怎么确认容器已被识别
别靠猜。打开开发者工具，选中目标父元素，在右侧 Layout 面板里找 “Container query container” 是否打钩。没勾说明：
- 要么 CSS 没生效（检查拼写、优先级、是否被覆盖）
- 要么 DOM 结构不满足条件（比如父元素 display 不合法、尺寸为 0）
- 临时加
outline: 1px solid red看它是否真实渲染并有宽度
真正难的不是写对 @container 语法，而是让那个父元素“可测”——它得是个有明确尺寸、处于稳定 BFC 中、且未被布局机制干扰的盒子。
