contain-intrinsic-block-size 是 css containment level 2 的实验性属性，仅 chromium（chrome≥122、edge≥122）部分支持，firefox 和 safari 完全不识别；它是 contain-intrinsic-size 的块轴拆分版本，但无法替代后者，且无 polyfill 或降级方案。
contain-intrinsic-block-size 是什么，为什么不能直接用
contain-intrinsic-block-size 是 contain-intrinsic-size 的轴向拆分版本（block axis only），属于 CSS Containment Level 2 的实验性属性，**目前仅 Chromium 系统（Chrome ≥ 122、Edge ≥ 122）部分支持，Firefox 和 Safari 完全不识别**。它本意是只预设块方向（即垂直方向）尺寸，避免在流式布局中因行内方向（inline）不确定而误设宽高。但实际项目中：它无法替代 contain-intrinsic-size，且没有 polyfill 或降级方案。
content-visibility: auto 必须配 contain-intrinsic-size，不是可选
浏览器对 content-visibility: auto 元素默认按 height: 0 处理其占位——哪怕它内部有 20 行文本或一张图片。这会导致：
• 滚动条突然收缩再弹出
• 快速滚动时内容“闪入”或位置跳变
• 页面整体高度塌陷，影响 sticky 定位或 footer 布局
• getBoundingClientRect() 返回错误的 height
解决方式只有一个：必须显式设置 contain-intrinsic-size，例如：
.item {
content-visibility: auto;
contain-intrinsic-size: 80px; /* 单值 = height，width 默认 auto */
}
- 单值写法等价于
contain-intrinsic-size: auto 80px，宽度仍由内容撑开 - 双值写法如
contain-intrinsic-size: 300px 80px同时约束宽高，适合卡片类固定宽高比元素 - 不要写
contain-intrinsic-size: auto—— 这等于没设，Chrome 会忽略
怎么估算 contain-intrinsic-size 的合理值
关键不是“精确”，而是“足够稳定”。过高浪费滚动空间，过低导致内容挤出、重绘抖动。
- 单行文字列表（如消息项）：取
line-height× 1.2，比如line-height: 24px→ 设contain-intrinsic-size: 29px - 卡片类（含头像+标题+描述）：用 DevTools 测量最矮卡片的实际高度，再 × 1.1～1.25 作为保守值
- 动态内容（如展开/收起区域）：初始设一个基础值，JS 触发展开后立即更新：
el.style.containIntrinsicSize = 'auto 160px' - 绝对不能依赖子元素的
height：如果卡片内部写了height: 120px，它会覆盖contain-intrinsic-size的高度设定
容易被忽略的冲突点：contain: size 会废掉 contain-intrinsic-size
如果你给同一个元素同时写了：
.item {
content-visibility: auto;
contain-intrinsic-size: 80px;
contain: size; /* ❌ 危险！ */
}
Chrome 会直接忽略 contain-intrinsic-size，退回到 height: 0 行为。因为 contain: size 要求浏览器完全放弃该元素的尺寸参与布局计算，与 contain-intrinsic-size “主动提供占位尺寸”的设计目标矛盾。
正确做法是：
• 长列表容器用 content-visibility: auto + contain-intrinsic-size
• 单个卡片内部若需隔离渲染，改用 contain: layout paint（不带 size）
• 绝对不要给 content-visibility: auto 元素加 contain: size
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
