contain: layout paint 必须同时使用，单独任一值均无效；响应式容器需尺寸可预测，如用 clamp() 或固定高宽组合；绝对定位子元素需父级设 position: relative；验证须通过 Paint Flashing 和 Layers 面板确认。
contain: layout paint 必须同时写，单用等于没写
只加 contain: layout，子元素改 color、opacity 或文字内容，父级照样重算样式；只加 contain: paint，图片加载撑高、文字换行，父容器立刻重排。浏览器不会报错，但隔离链路是断的——它只切掉一半影响。真正起效必须二者共存：contain: layout paint，且缺一不可。
响应式容器加 contain 前，先确认尺寸是否“可预测”
响应式设计里常见 min-height: min-content、flex: 1、width: 100% 配合 max-width: 100vw，这些写法在多数情况下会让浏览器判定尺寸不可控，静默忽略 contain 声明。
- ✅ 安全写法：
min-height: 240px+max-height: 600px+overflow-y: auto - ✅ 响应式可用：
height: clamp(240px, 50vh, 600px)（Chrome 120+ 支持，Safari 16.4+ 稳定） - ❌ 高危写法：
height: auto、min-height: max-content、width: fit-content
特别注意：若该容器是 display: flex 的子项，且父级未设 min-height 或固定高度，contain 同样不生效。
绝对定位子元素在响应式中容易逃逸 containment 边界
给响应式弹层（如 .modal、.dropdown-menu）加 contain: layout paint 后，若内部有 position: absolute 元素，且其 offsetParent 不在该容器内（比如锚定到 body），就会视觉上“破框而出”，尤其在视口缩放或横竖屏切换时更明显。
- 确保父容器设了
position: relative且自身尺寸可控 - 避免把
contain加在transform动画根节点上——它会截断backdrop-filter和filter继承 - 移动端 iOS Safari 对
contain: strict的size部分支持不一致，优先用contain: layout paint
验证是否真生效，别信 getComputedStyle(el).contain
控制台查到 "layout paint" 只代表 CSS 规则被解析了，不代表隔离已启用。真实效果必须靠 Chrome DevTools → Rendering → 勾选 “Paint Flashing” 来验证：滚动、悬停、加载图片时，闪光是否严格限制在容器内框中。外溢即失败。
另一个关键信号是 Layers 面板里该元素是否显示为 “Isolated Layer Root”。没出现这个标识，说明浏览器压根没把它当独立渲染上下文处理——这时候再调样式也没用，得回头检查尺寸声明和祖先干扰项（比如 will-change、backdrop-filter、display: contents）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
