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

我想在弹性盒内有一个方形 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

2018年更新

Flexbox 规范已更新。

4.2. Flex 项目边距和填充

弹性项目上的边距和填充百分比，就像块上的百分比 盒子，根据其包含块的内联大小进行解析， 例如左/右/上/下百分比全部解析为反对他们的 包含水平写入模式下块的宽度。

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

来自弹性盒规格:

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

这里还有一些：

4.2. Flex 项目边距和填充

弹性项目上的百分比边距和填充可以根据以下任一方法来解决：

• 他们自己的轴（左/右百分比根据宽度解析，顶部/底部根据高度解析），或者，
• 内联轴（左/右/上/下百分比均根据宽度解析）

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

注意：这种差异很糟糕，但它准确地反映了世界的当前状态（实现之间没有达成共识，CSSWG 内部也没有达成共识）。 CSSWG 的目的是让浏览器集中于其中一种行为，届时规范将被修改。