CSS contain 如何隔离复杂组件布局计算

复杂卡片、虚拟列表或动态面板频繁更新时，最稳妥的做法不是一上来写 contain: strict，而是先确认要隔离布局、绘制还是尺寸。通常从 contain: layout paint 开始；只有子元素不应参与父级尺寸计算时，才加入 size，并准备明确尺寸或 contain-intrinsic-size。

CSS contain 的核心是给组件划边界：layout 限制内部布局影响外部，paint 限制绘制越界，size 让盒子尺寸忽略子元素。隔离越强，定位、溢出和尺寸兜底越需要重新检查。

• 布局问题：优先考虑 contain: layout，让内部布局在组件内收敛。
• 绘制问题：使用 contain: paint 时，要确认阴影、提示层和下拉菜单不需要越过边界。
• 尺寸问题：contain: size 不会读取子元素撑开的高度，需配合固定尺寸或 intrinsic size。

先分清 contain 隔离了哪类计算

contain 不是“让这个组件更快”的单一开关，而是一组独立的隔离能力。layout 让组件内部布局与外部布局分开；paint 把后代绘制限制在自身边界；size 计算盒子尺寸时忽略子元素；style 则限制计数器和引号等会向外传播的样式效果。

其中 layout、paint、content 和 strict 还会建立新的包含块、堆叠上下文和块格式化上下文。也就是说，组件里的 position: absolute、z-index、浮动和外边距折叠，可能不再按照原来的祖先关系工作。

用 layout 和 paint 处理复杂组件边界

如果问题是组件内部频繁增删节点导致外部页面也反复参与布局，先尝试 layout。如果问题是卡片阴影、装饰层或离屏内容带来额外绘制，再考虑 paint。一个常见的组件边界可以这样写：

.dashboard-card {
  /* 中文注释：隔离内部布局，并把后代绘制限制在卡片边界内 */
  contain: layout paint;
  position: relative;
  overflow: hidden;
}

.dashboard-card__menu {
  /* 中文注释：absolute 会以带 layout containment 的卡片作为包含块 */
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 2;
}

这段写法适合仪表盘卡片、独立表格块和局部渲染面板，但不能默认适用于所有弹层。paint 会裁剪越过盒子边界的后代，阴影、气泡提示、日期下拉框如果需要“伸出卡片”，就应把弹层放到更外层，或只使用 layout，不要为了性能强行裁切。

需要独立尺寸时再加入 size

contain: size 的关键语义是：计算容器尺寸时像没有子元素一样。它适合虚拟列表的占位项、折叠面板的稳定外框等场景，却不适合内容高度完全未知、还希望父级自动撑开的普通卡片。

.virtual-panel {
  /* 中文注释：尺寸隔离后，先给浏览器一个离屏布局可用的估计高度 */
  contain: size layout paint;
  contain-intrinsic-size: 480px;
  min-height: 480px;
}

.content-card {
  /* 中文注释：content 等价于 layout、paint、style，不主动隔离 size */
  contain: content;
}

如果只写 contain: size 而没有宽高、最小高度或 intrinsic size，页面可能出现高度塌缩、滚动位置跳动或内容看似消失。contain-intrinsic-size 提供的是布局阶段的估计值，不是对子元素真实尺寸的测量；恢复可见后，浏览器仍会根据真实内容更新布局。

用组合值收敛复杂组件的默认方案

实践中可以把选择写成一张小表：只隔离布局就用 layout；布局和绘制都独立就用 layout paint；想要除尺寸外的完整隔离可用 content；需要尺寸隔离时再明确加入 size。strict 等价于 size layout paint style，副作用最大，不建议当作默认模板。

排查 contain 不生效或布局变形的检查项

第一，确认隔离值确实解决原问题，不要只看某次加载变快；第二，检查组件是否依赖跨边界的定位、阴影或滚动；第三，给 size 场景补上可解释的占位尺寸；第四，用浏览器性能面板观察布局和绘制变化，并在真实内容量下复查滚动与响应式断点。

如果组件只是一个普通文档流卡片，过早加入 strict 往往会把尺寸问题变成新的 bug。把 contain 当成明确的边界声明，按最小隔离范围逐项增加，通常比“一次开启全部能力”更容易维护。

常见问题

contain: paint 为什么让下拉菜单消失？

因为 paint containment 会限制后代在容器边界外绘制。把下拉菜单移动到更外层的弹层容器，或去掉不必要的 paint containment。

contain: size 和 contain-intrinsic-size 必须一起用吗？

不是语法上的强制关系，但尺寸隔离后最好提供明确的尺寸或 intrinsic size，否则容器可能按没有子元素的状态计算，产生塌缩或布局跳动。

小结：先定位是布局、绘制还是尺寸计算被牵连，再选择 layout、paint 或 size。复杂组件的默认起点通常是 layout paint，而 strict 和 size 必须配合定位、溢出和尺寸检查。