为何CSS属性container-type: size会使元素高度为0？如何保留该属性恢复高度？

为什么设置container-type: size后元素高度为0？ #

当给元素设置container-type: size时，它会变成CSS尺寸容器，这类容器的布局逻辑有特殊规则：默认情况下，尺寸容器的高度不会自动由内部内容撑起。如果容器本身没有设置明确的高度约束，且内部内容也没有触发能撑起容器的布局规则（比如BFC），浏览器就无法计算出容器的高度，最终导致容器坍缩为高度0。这是因为尺寸容器需要明确自身尺寸来作为后续容器查询的基准，没有支撑的话就会呈现这种极端收缩的状态。

保留container-type: size的同时恢复元素高度的方法 #

方法1：设置最小高度为自适应内容值 #

给容器添加min-height: fit-content，让容器根据内部内容自动适配高度，同时保留尺寸容器的特性：

<div style="container-type: size; min-height: fit-content;">Height of this div is no longer zero.</div>

也可以设置具体的高度值（比如height: 100px），但fit-content更灵活，能适配内容变化。

方法2：让内部内容触发BFC #

给容器内的内容添加能触发BFC的样式（比如display: flow-root或overflow: hidden），让内容撑起容器高度：

<div style="container-type: size;">
  <div style="display: flow-root;">Height of this div is no longer zero.</div>
</div>

注意：overflow: hidden会隐藏超出容器的内容，使用前需确认是否符合需求。

方法3：将容器设置为grid或flex布局 #

把容器的display属性设为grid或flex，这类布局容器会自动根据内部内容调整高度，同时完全兼容container-type: size：

<div style="container-type: size; display: grid;">Height of this div is no longer zero.</div>

内容的提问来源于stack exchange，提问作者yakunins