为何仅Firefox中Flex子元素会预留垂直空间？

复现步骤 #

• 在最新版Firefox中运行对应代码页面
• 观察滚动区域底部，<custom>元素会占据少量额外空间

问题现象 #

该额外空间仅在Firefox中出现，最新版Chrome和Safari无此问题。

可行修复方案 #

• 删除嵌套的<custom>元素
• 为<custom>元素添加样式：custom { display: block; }
• 为<custom>元素添加样式：custom { font-size: 0; }

原因分析 #

自定义元素未显式设置display属性时，Firefox与Chrome/Safari的默认处理存在差异：

• Firefox可能将未声明display的自定义元素默认视为inline或inline-block类型，嵌套的空自定义元素会因默认字体大小、行高产生空白空间，在flex column布局中被保留。
• Chrome/Safari则可能默认将这类自定义元素视为block，或自动折叠了空inline元素的空白空间，因此不会出现额外占位。

相关未解决问题：Firefox Bugzilla上存在涉及自定义元素默认display属性与flex布局交互的未修复Bug，核心是不同浏览器对自定义元素初始display值的解析不一致。

代码示例 #

CSS #

body {
  background: blue;
  margin: 0;
}

#container {
  background: red;
  display: flex;
  flex-direction: column;
}

#inner {
  height: 1000px;
}

HTML #

<div id="container">
  <div id="inner">Hello!</div>
  <custom>
    <custom></custom>
  </custom>
</div>

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