Safari中height:fit-content的dialog子元素height:100%高度为0的原因排查

Safari 对 <dialog> 元素的 height: fit-content 渲染逻辑存在兼容性差异：当父元素（dialog）设置 height: fit-content 时，Safari 并未将这个计算出的高度作为子元素百分比高度的有效参考上下文。而百分比高度的生效前提是父元素拥有明确的、非自动计算的高度基准，其他浏览器（如 Chrome、Firefox）会把 fit-content 计算后的高度作为有效基准，但 Safari 在 dialog 元素上不认可这一点，导致子元素的 height: 100% 因无参照值而被计算为 0。

以下几种方法都能解决这个问题，可根据实际场景选择：

方法1：给父元素添加弹性布局（flex） #

给 .parent 加上 display: flex，flex 容器会自动为子元素建立高度上下文，子元素的 height: 100% 就能正常继承父元素的内容高度：

.parent {
  height: fit-content;
  display: flex;
  flex-direction: column; /* 保持垂直排版，和默认文档流一致 */
}

.child {
  height: 100%;
  background-color: lightgreen;
}

方法2：改用 min-height: fit-content 替代 height: fit-content #

将父元素的 height 替换为 min-height，同时保留默认的 height: auto（可省略不写），这样 Safari 能正确识别父元素的内容高度作为子元素的百分比高度基准：

.parent {
  min-height: fit-content;
}

.child {
  height: 100%;
  background-color: lightgreen;
}

方法3：给父元素显式设置高度上下文（用grid布局） #

和 flex 类似，grid 容器也能提供有效的高度上下文，只需给 .parent 添加 display: grid：

.parent {
  height: fit-content;
  display: grid;
}

.child {
  height: 100%;
  background-color: lightgreen;
}

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