contain: layout paint 必须同时使用且配显式尺寸才生效，单用任一值或缺尺寸会导致浏览器静默忽略；二者共存可切断布局外溢与绘制扩散，显式高度如min-height是硬性前提。
contain: layout paint 必须同时写，单用等于没写
只加 contain: layout，子元素用 transform 移动或切换 visibility，父容器仍会重排；只加 contain: paint，哪怕文字换行撑高容器，也会导致外部布局抖动。浏览器只有看到二者共存，才真正切断“布局外溢”和“绘制扩散”两条链路。
常见错误现象：getComputedStyle(el).contain 返回 "layout paint"，但滚动/动画帧率毫无提升——大概率是浏览器静默忽略了它，不是 CSS 没写对。
显式尺寸是硬门槛，flex: 1 或 height: auto 会让隔离失效
浏览器要求 contain: layout 容器必须有可预测的边界，否则直接跳过隔离逻辑。以下写法全部无效：
-
height: auto、min-height: min-content -
flex: 1且父容器无固定高度约束 -
width: fit-content或依赖内容撑开的宽高
稳妥写法示例：min-height: 240px; max-height: 600px; overflow-y: auto;。下限防塌陷，上限锁死重绘区域，尤其适合 .dropdown-menu、.modal-body 这类定位频繁变动的容器。
绝对定位元素加 contain 会改变 containing block
给 position: absolute 的元素（如 .tooltip）加 contain: layout paint，会创建新的 containing block，导致其 top/left 计算基准从最近定位祖先变成自身，视觉上突然偏移。
解决办法：
- 确保该元素的定位上下文稳定：父级设
position: relative且尺寸可控 - 避免在
transform动画根节点上直接套contain: strict，它会隔离font-size、color等继承属性，可能截断filter或backdrop-filter效果
JS 动态插入前必须手动设 style.contain
Vue/React 中通过 v-if 或 useState 控制显示的弹层，DOM 插入瞬间就会触发重排——此时 CSS 规则还没来得及生效。
正确时机：
- 插入大量子节点前，先执行
el.style.contain = 'layout paint' - 收起时若用了
height: 0+overflow: hidden动画，记得清空：el.style.contain = ''，否则真实高度变化后，contain会继续按旧尺寸隔离，造成错位
真正生效与否，不能只看 CSS 是否写了，得打开 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “Layout Shift Regions”，观察重绘区域是否收缩。显式尺寸 + 同时启用 layout/paint + JS 设置时机，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
