为何Firefox中iframe的flexbox容器高度为0？

我之前也碰到过一模一样的问题，这其实是Firefox对Flex布局里padding-bottom撑高元素的计算逻辑和Chrome等浏览器不一样导致的，咱们来一步步解决它：

问题根源 #

你用padding-bottom: 56.25%实现16:9的响应式比例，内部元素又是绝对定位（完全脱离文档流）。在Chrome里，Flex容器会自动识别padding带来的高度，但Firefox的Flex布局默认不会把这种基于宽度的padding算进Flex项的高度里；再加上你设置了align-items: center，当Flex项的实际内容高度为0时，整个容器就直接塌陷成0了。

解决方案 #

给那个带padding-bottom的Flex子元素添加height: 0，让元素的高度完全由padding-bottom来撑起来，这样Firefox就能正确识别Flex项的高度，容器也就不会塌陷了。

修改后的完整代码 #

CSS部分

.container { border: 2px black solid; }
.flexbox { 
  max-width: 854px; 
  margin: 0 auto; 
  display: flex; 
  justify-content: center; 
  align-content: center; 
  align-items: center; 
  background: yellow 
}
.flexbox div { 
  position: relative; 
  width: 100%; 
  height: 0; /* 新增这一行，让高度完全由padding-bottom控制 */
  padding-bottom: 56.25%; 
}
.flexbox div span { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  width: 100%; 
  height: 100%; 
  border: none; 
}

HTML部分

<div class="container">
  <div class="flexbox">
    <div>
      <span> TExT </span>
    </div>
  </div>
</div>

额外说明 #

之后你把span换成iframe的话，这个方案同样适用——因为iframe是绝对定位，不会影响父元素的高度计算，而height:0 + padding-bottom的组合能在所有浏览器里稳定实现响应式比例的容器。

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