为什么百分比填充/保证金不工作在Firefox和Edge中的Flex项上？

Question

为什么百分比填充/保证金不工作在Firefox和Edge中的Flex项上？

我想在挠曲箱里放一个方向盘。所以我用：

.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

柔性箱规范已经更新。4.2.挠曲项边距和衬垫与块框上的项目一样，挠曲项上的百分比边距和垫片是根据其包含块的内联大小(例如左/右/上/下百分比)解析的，所有这些百分比都是根据其包含块的宽度在水平写入模式下解析的。从挠曲箱规格:作者应该完全避免在Paddings或FlexItem上使用百分比，因为他们在不同的浏览器中会得到不同的行为。这里还有一些：4.2.挠曲项边距和衬垫在FLEX项目上的百分比边距和垫片可以通过以下两种方法来解决：它们自己的轴(左/右百分比相对于宽度，顶部/底部百分比与高度对应)，或，内联轴(左/右/上/下百分比都是相对宽度解析的)用户代理必须选择这两种行为之一。注意：这种差异很糟糕，但它准确地捕捉到了世界的现状(实现之间没有共识，CSSWG内部也没有共识)。CSSWG的意图是，浏览器将集中在其中一种行为上，届时规范将被修改。