contain-intrinsic-size 必须显式声明且不可为空或 auto，它是 content-visibility: auto 的强制配套项，用于预估未渲染区域的占位尺寸以避免布局偏移、滚动跳动和高度塌陷。

contain-intrinsic-size 必须显式声明，不能留空或写 auto

浏览器对 content-visibility: auto 元素默认按高度 0 处理布局，contain-intrinsic-size 不是“可选优化”，而是强制配套项。留空、写 contain-intrinsic-size: auto 或完全不写，等同于没设——滚动条会跳、内容会闪、父容器高度塌陷。

取值要预估“未渲染时的占位尺寸”，不是真实内容高度

这个值的作用是告诉布局引擎：“这块区域虽然还没渲染，但大概占这么多空间”。它不参与实际渲染，只影响滚动计算和父容器高度。常见场景建议如下：

• 单行固定高列表（如消息气泡、菜单项）：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 的高度部分将被忽略。注意以下几点：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 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），对不支持环境禁用该优化

真正容易被忽略的点是：这个尺寸不是越准越好，而是“足够稳”就行。预估偏差 10%～20% 比强行精确但导致 JS 动态重设更可靠——因为每次重设都可能触发 layout shift。