@container 规则生效的前提是显式声明 container-type: inline-size 或 size，否则静默失效；常见错误包括遗漏 container-type、在 display: contents/absolute 元素或内联元素上直接设置、在 flex/grid 直接子项上设置、容器尺寸不可测（如脱离文档流或无宽度约束），且 @container 不可嵌套于 @media 内。
container-type 必须显式声明，否则 @container 完全不生效
浏览器默认不会把任何元素当作容器，@container 规则静默失效是常态——控制台不报错、DevTools 里也看不出异常，但样式就是不应用。核心条件只有两个：container-type: inline-size（最常用）或 container-type: size，缺一不可。
常见踩坑点：
- 只写了
container-name: card，没配container-type→ 查询永远不触发 - 给
display: contents或position: absolute的父元素设container-type→ 属性被忽略，因为它们不生成布局盒 - 对
<span></span>这类内联元素直接设container-type→ 尺寸不可测，必须先加display: block或display: flow-root
Flex/Grid 子项不能直设容器，需 wrapper 隔离
在 display: flex 或 display: grid 的直接子项上设容器 → 无效。原因在于：该子项的尺寸由父容器的布局算法动态分配，浏览器无法在布局前稳定读取其 inline-size。
稳妥做法：
- 额外包一层
div（wrapper），并确保它有稳定尺寸，例如加min-width: 0或width: 100% - 给 wrapper 加
contain: layout style size，既隔离子内容影响，又确保尺寸上下文稳定 - 避免用
contain: content，它不包含尺寸隔离能力
局部盒模型重塑依赖容器可测尺寸，不是“有宽就行”
即使 container-type 写对了，如果容器本身宽度无法稳定计算，@container 依然不会响应。关键不是“有没有宽”，而是“浏览器能不能可靠拿到它”。
典型不可测场景：
- 父容器是
float或position: absolute→ 脱离文档流，尺寸无锚点 - 父容器仅靠内容撑开，且未设
width、max-width或flex-basis→ 浏览器无法在布局前确定其inline-size - 父容器是 Grid/Flex 子项，但父级 Grid/Flex 没设约束（如
grid-template-columns或flex: 1）→ 尺寸由算法动态分配，非静态可查
@container 不是@media的替代品，职责必须分清
@container 管组件内部细节（比如卡片图文方向、按钮图标显隐），@media 管页面结构（比如导航栏折叠、网格列数切换）。混用没问题，但嵌套就出问题。
错误写法示例：
@media (min-width: 768px) {
@container (min-width: 400px) {
.card { display: flex; }
}
}
后果：
- 组件失去独立性——它的行为被视口和容器双重绑定
- Safari 下可能因解析顺序失效（尤其 16.4 版本对命名容器有兼容问题）
- 微前端或 CMS 动态区块中，子组件无法脱离主应用断点规则运行
真正难的不是写对语法，而是让容器尺寸在各种嵌套、弹性、浮动、绝对定位场景下仍能被浏览器稳定测量——这需要你主动干预布局上下文，而不是依赖默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
