contain: layout paint 直接生效需容器有明确宽高或最小尺寸限制，否则浏览器静默忽略；layout 防止子元素影响外部布局，paint 裁剪溢出并跳过不可见绘制，二者缺一不可。
直接生效的写法只有 contain: layout paint，且容器必须有明确宽高或最小尺寸限制，否则浏览器会静默忽略——这不是 bug，是规范强制要求。
contain: layout paint 为什么必须配尺寸
浏览器需要一个可测量的边界来划定“隔离区”。没有 width、height 或 min-height 的容器，其高度由内容撑开，属于“无限高”场景，contain 失去锚点，Chrome 和 Firefox 都会跳过优化。
- ❌ 错误：父容器仅设
contain: layout paint，无任何尺寸声明 → 完全不生效 - ✅ 正确：至少加
min-height: 200px或height: fit-content（注意fit-content在 Safari 中需加前缀） - ⚠️ 注意：
height: auto、flex: 1、max-content均不满足“明确尺寸”条件，不能替代
layout 和 paint 各自管什么，为什么不能只选一个
layout 封锁子元素尺寸/位置变化对外部的影响；paint 强制裁剪溢出并跳过不可见区域绘制。二者缺一不可：
- 只用
contain: layout：子元素改opacity或background-color仍可能触发父级重绘 - 只用
contain: paint：子元素高度突变（如展开折叠面板）会导致外层滚动条跳动、兄弟元素重排 - ✅ 必须同时启用：
contain: layout paint才构成完整渲染上下文隔离
contain: strict 和 contain: size 的高风险场景
strict 看似“最强”，但实际等于 layout paint style size 全开，size 子项尤其危险：
立即学习“前端免费学习笔记（深入）”；
-
contain: size要求浏览器“完全信任”该容器尺寸永不变化，一旦子元素真实撑高（比如文字换行、图片加载），轻则内容被裁剪，重则容器渲染为0×0 -
strict下，position: absolute子元素若依赖父容器计算top/left，可能因布局隔离失效而错位 - React/Vue 中动态修改容器高度时，
size会让子元素直接消失——连getComputedStyle都读不到正确值
JS 动态设置 contain 的三个关键时机点
用 JS 控制 element.style.contain 不是简单赋值就完事：
- 必须在首次渲染前设置：用
innerHTML插入后立刻加contain，大概率错过优化窗口 - 避免在
requestAnimationFrame中反复 toggle：contain切换会重建渲染树，比不用还慢 - 推荐方案：通过 class 控制，例如
class="card card--contained"，CSS 中写死.card--contained { contain: layout paint; min-height: 120px; }
真正容易被忽略的是：contain 不是“开关”，而是“承诺”。你承诺容器尺寸稳定、子元素不越界、不滥用 position: fixed —— 浏览器才兑现局部重绘。一旦承诺被打破，效果就降级为普通样式，且毫无提示。
