contain-intrinsic-size 必须显式声明且不可为空或 auto，它是 content-visibility: auto 的强制配套项，用于预估未渲染区域的占位尺寸以避免布局偏移、滚动跳动和高度塌陷。
contain-intrinsic-size 必须显式声明，不能留空或写 auto
浏览器对 content-visibility: auto 元素默认按高度 0 处理布局，contain-intrinsic-size 不是“可选优化”，而是强制配套项。留空、写 contain-intrinsic-size: auto 或完全不写，等同于没设——滚动条会跳、内容会闪、父容器高度塌陷。
取值要预估“未渲染时的占位尺寸”，不是真实内容高度
这个值的作用是告诉布局引擎：“这块区域虽然还没渲染，但大概占这么多空间”。它不参与实际渲染，只影响滚动计算和父容器高度。常见场景建议如下：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 单行固定高列表（如消息气泡、菜单项）：
contain-intrinsic-size: 64px - 卡片类元素（宽高比相对稳定）：
contain-intrinsic-size: 300px 240px（Chrome 122+ 支持双值写法） - 高度差异大的列表项：取所有子项最小高度的 1.2 倍，避免留白过大
- 富文本/折叠区域：初始设保守值（如
800px），JS 加载完后用element.style.containIntrinsicSize = 'auto'动态重设
显式 height 会覆盖 contain-intrinsic-size 的高度设定
如果元素或其子元素设置了 height（包括 min-height、max-height），浏览器会优先采用该值，contain-intrinsic-size 的高度部分将被忽略。注意以下几点：
-
contain-intrinsic-size: 300px 240px中的宽度值仍有效，但高度被height: 200px覆盖 - 用
aspect-ratio替代固定 height 更安全，尤其在响应式卡片中 - 调试时可用 DevTools 检查 computed 样式，确认最终生效的是哪个 height 来源
兼容性与 fallback 要提前考虑
content-visibility 和 contain-intrinsic-size 在 Safari 中支持有限（截至 2026 年 5 月，Safari 19 仍不支持双值写法，且对 auto 值解析不稳定）。实际项目中需注意：
- 用
@supports (content-visibility: auto)包裹整套规则，避免旧版浏览器误解析 - 不要依赖
contain-intrinsic-size: auto做 fallback，部分浏览器会当无效值丢弃 - 服务端或构建时可注入降级 class（如
.no-cv），对不支持环境禁用该优化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
