为什么Firefox和Edge中的填充项目的百分比填充/边距不起作用？

Question

我想在flexbox中有一个方形div.所以我使用:

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}

<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

这在Chrome中运行良好.但在Firefox中,父母只挤到一行.

我如何在Firefox中解决这个问题？我使用的是44版.

您还可以在https://jsbin.com/lakoxi/edit?html,css查看代码

Answer 1

2018年更新

flexbox规范已更新.

4.2.Flex项目边距和填充

弹性项目上的边距和填充百分比(如块方框上的那些)根据其包含块的内联大小进行解析,例如左/右/上/下百分比都在水平书写模式下解析其包含块的宽度.

原始答案 - 适用于2018年之前发布的FF和Edge版本

从flexbox规范:

作者应该完全避免在弹性项目中使用填充或边距的百分比,因为它们会在不同的浏览器中获得不同的行为.

这里还有一些:

4.2.Flex项目边距和填充

Flex项目的边距和填充百分比可以通过以下任一方式解决:

• 他们自己的轴(左/右百分比分解宽度,顶部/底部解决高度),或,
• 内联轴(左/右/上/下百分比全部解析宽度)

用户代理必须选择这两种行为之一.

注意:这种差异很糟糕,但它准确地捕获了当前的世界状态(实现之间没有达成共识,并且在CSSWG中没有达成共识).CSSWG的目的是浏览器将收敛于其中一个行为,此时规范将被修改.