为什么Firefox的flex项目没有百分比填充/边距？

我想在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

从flexbox规格 ：

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

还有一些：

4.2。 Flex项目边距和填充

弹性项目上的边距和填充百分比可以通过以下两种方式来解决：

• 他们自己的轴（左/右百分比解决宽度，顶部/底部解决高度），或者，
• 内联轴（左/右/上/下百分比都是针对宽度的）

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

注意：这种差异是很糟糕的，但却准确地反映了当前世界的状况（实施中没有达成共识，CSSWG也没有达成共识）。 这是CSSWG的意图，浏览器将会收敛在其中一个行为，届时规范将被修改。

Answer 2

除了Michael_B的回答之外 ，这里有一个可能的解决方法。

当使用百分比时，我们经常将它与视口宽度联系起来，因此考虑到这一点，视口单位vw / vh可以是一个选项，因为它的工作原理类似（响应）。

堆栈片段

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

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