contain: layout paint 必须一起写，单用 layout 无法阻止重排；需配合显式尺寸（如 min-height/max-height）和正确插入时机才生效。
contain: layout paint 必须一起写，单用 layout 无法拦重排
只加 contain: layout，子元素改宽高、换行、图片加载撑开容器，照样触发父级重排——因为 layout 只切断“位置影响链”，不拦尺寸变化扩散。浏览器仍需向上回溯计算布局边界。
常见错误现象：下拉菜单展开时页面抖动、列表项动态增删后滚动条跳动、富文本编辑器里输入换行导致工具栏位移。
-
contain: layout单独启用 → 子元素margin、width、height变更仍会传播到父容器 -
contain: paint单独启用 → 完全不管尺寸变化，只裁剪绘制区域，对重排零防护 - 真正起效的组合只有：
contain: layout paint（strict等价但含size，易出问题）
显式尺寸是硬门槛，没它 containment 就静默失效
Chrome 和 Safari 遇到 height: auto、min-height: min-content、flex: 1 或 width: fit-content，会直接忽略 contain: layout paint 声明——你查 getComputedStyle(el).contain 还是返回字符串，但渲染行为毫无变化。
必须让浏览器能提前确认边界。稳妥写法是设下限+上限：
立即学习“前端免费学习笔记（深入）”；
-
min-height: 200px防塌陷 -
max-height: 600px锁死重排区域高度 -
overflow-y: auto配合滚动，避免内容溢出破坏隔离 - Flex/Grid 容器里的子项加 contain，父容器也得有确定尺寸（比如
flex: 1外再套min-height）
哪些地方加了真能拦重排，哪些加了反而坏事
重点盯住「内容动态 + 尺寸可控」的局部区域。不是所有盒子都适合加，加错地方会破坏布局或白忙一场。
- ✅ 有效场景：
.dropdown-menu（弹层高度固定）、.calendar-grid（日历格子行列数确定）、.card-item（卡片高度由min-height保障） - ❌ 避开根级容器：
body、#app、.navbar—— 它们尺寸不可控，加了等于没加，还可能让position: sticky失效 - ⚠️ JS 动态插入节点前必须手动设：
el.style.contain = 'layout paint'；插入后再加，过程已触发重排 - ⚠️ 收起动画（如
v-if切换）后记得清空：el.style.contain = ''，否则高度可能被锁死
移动端和框架里容易漏掉的关键点
iOS Safari 16.4+ 才稳定支持 paint，旧版静默忽略；Android Chrome 需开启实验性功能。Vue/React 组件里，contain 很可能被框架的 DOM 插入时机绕过。
- 按钮本身加
contain: paint没用——它没后代树可隔离；要包一层<span>或<div>再设 - 绝对定位元素（如 tooltip、fixed 浮窗）必须确保包含块是自身容器，即加
position: relative，否则会逃逸出隔离边界 - 生产环境务必检测：
if ('contain' in document.documentElement.style)，Safari 对size实现有偏差，X5 内核基本不支持strict
contain: layout paint + 显式高度约束 + 插入时机正确」这三点。少一个，浏览器就当没看见。 
