contain 属性无效八成因容器未设尺寸，必须配合 min-height 或 height 才生效；layout 与 paint 必须同时使用才能完整隔离渲染；strict 含 size 风险高，推荐用 content（即 layout paint）。
contain 属性加了没反应？八成是容器没设尺寸，浏览器直接静默忽略。
contain: layout paint 为什么必须配 min-height 或 height
浏览器需要一个可测量的边界来划定“隔离区”。没有 width、height 或 min-height 的容器，其高度由内容撑开，属于“无限高”场景，contain 失去锚点，Chrome 和 Firefox 都会跳过优化。
- ❌ 错误写法：
.panel { contain: layout paint; }（无任何尺寸声明）→ 完全不生效 - ✅ 正确写法：
.panel { contain: layout paint; min-height: 200px; }或height: fit-content;（Safari 需加-webkit-前缀） - ⚠️ 注意：
height: auto、flex: 1、max-content均不满足“明确尺寸”条件，不能替代
layout 和 paint 必须一起用，单用等于白加
contain: layout 只锁布局传播，contain: paint 只裁绘制区域。二者缺一不可：
- 只用
contain: layout：子元素改opacity或背景色仍可能触发父级重绘（paint 未隔离） - 只用
contain: paint：子元素高度突变（如折叠面板展开）会导致外层滚动条跳动、兄弟元素重排（layout 未隔离） - ✅ 正确组合：
contain: layout paint;才构成完整渲染上下文隔离
strict 和 content 别乱选，size 是最危险的取值
contain: strict 等价于 layout paint size，而 size 是真正容易出事的那一个：
立即学习“前端免费学习笔记（深入）”；
-
contain: size要求浏览器“完全信任”该容器尺寸永不变化；一旦子内容真实撑高（比如图片加载、文字换行），轻则内容被裁剪，重则容器渲染为0×0 -
position: absolute子元素若依赖父容器计算top/left，在size下可能错位——因为包含块逻辑被重置 -
content-visibility: auto容器里再加contain: size会破坏contain-intrinsic-size，导致虚拟滚动失效 - ✅ 更安全的选择：
contain: content;（即layout paint），保留尺寸响应性，适合大多数动态卡片、列表项
最容易被忽略的是：contain 不是“开了就快”，而是“边界定了才起效”。哪怕你写了 contain: layout paint strict，只要 computed height 是 0，它就在那儿安静地摆烂。检查 DevTools 的 Computed 面板，确认 height 或 min-height 确实生效，比反复调参更重要。
