必须为预览容器设置显式高度约束（如min-height和max-height），否则contain: layout paint将被浏览器静默忽略；因其需可预测边界以建立隔离上下文，height: auto等动态值会导致隔离失效。
直接加 contain: layout paint 到预览容器上，但必须配显式高度约束，否则 Chrome 和 Safari 会静默忽略——这不是 bug，是规范强制要求。
为什么预览容器必须设 min-height 和 max-height
HTML 在线预览（比如 Markdown 渲染结果、代码片段高亮输出）通常用 contenteditable 或只读 div 呈现，内容高度随文本、图片、代码块动态变化。浏览器对 contain: layout 的容器有硬性尺寸要求：它需要可预测的边界来建立隔离上下文。
-
height: auto、min-height: min-content、height: fit-content都会让浏览器判定“尺寸不可控”，直接跳过 containment -
min-height: 300px; max-height: 800px; overflow-y: auto是最稳妥的组合：既提供下限防止塌陷，又用上限锁定重绘区域高度 - 若预览区支持折叠/展开（如代码块 toggle），需在展开后重新确认容器高度稳定，再设
contain；否则可能因高度突变触发父级重排
contain: layout paint 对预览内容变更的实际拦截效果
预览区常见操作——语法高亮切换、行号刷新、错误标记插入（如 <span class="error"></span>）、光标定位滚动——都依赖这个组合才能真正收窄重绘范围。
- 只加
paint：新插入的<mark></mark>可能撑开行高，导致整个预览容器重排，连带工具栏抖动 - 只加
layout：背景色切换、字体粗细变化仍会触发样式重算，波及相邻 DOM 节点 - 二者共存：
layout锁住行盒尺寸传播，paint确保颜色/透明度变更只重绘视口内可见块，滚动时工具栏、侧边栏完全不动
哪些预览子元素会意外破坏 contain 隔离
预览内容里常嵌入的动态组件，可能绕过隔离边界，让浏览器被迫扩大重绘范围：
立即学习“前端免费学习笔记（深入）”；
-
position: absolute的悬浮提示（如 hover 查看 HTML 标签结构）：若其top/left计算依赖window.scrollY，layout隔离会切断该依赖，导致定位偏移 -
position: fixed的全屏预览按钮或导出浮层：不受contain影响，但若父级误加了contain: strict，Safari 可能错判合成层层级 - 内联 SVG 或 Canvas 绘图：它们本身不响应
contain: paint的裁剪逻辑，需确保其宽高固定，否则仍会触发外部重排
验证是否真生效，别信 getComputedStyle(el).contain
声明写了、控制台查得到，不代表浏览器执行了隔离。真实效果只能靠渲染行为验证：
- 打开 Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”：滚动或触发高亮更新时，闪光应严格限制在预览容器内框中，不外溢到工具栏或页脚
- 勾选 “Layout Shift Regions”：点击折叠代码块或切换主题时，周围不应出现大片红色高亮——说明
layout隔离成功 - 若用了
content-visibility: auto分段渲染长文档，绝不能对其父容器再设contain: size，二者冲突会导致contain-intrinsic-size失效
最容易被忽略的是：预览容器本身不能是 contenteditable 元素，隔离必须落在它的父 wrapper 上；且所有尺寸约束（min-height、max-height）必须作用于同一节点，跨层设置会失效。
