为什么百分比填充/保证金不工作在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的意图是，浏览器将集中在其中一种行为上，届时规范将被修改。