为什么Firefox中的flex项目不使用百分比填充？ [英] Why doesn't percentage padding work on flex items in Firefox?

问题描述

我想在flexbox中有一个方形div。所以我使用：

I want to have a square div inside a flexbox. So I use:

.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中，父母只挤压一行。

This works fine in Chrome. But in Firefox, the parent squeezes to just one line.

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

How do I solve this in Firefox? I use version 44.

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

推荐答案

>从 flexbox规范：

作者应避免在flex项目的paddings或margin中使用百分比，因为它们会在不同的浏览器中产生不同的行为。 >

以下是更多：

4.2。 Flex项目边距和分页

Flex项目上的边距和边框百分比可以通过以下方式解决：

Percentage margins and paddings on flex items can be resolved against either:

• 自己的轴（左/右百分比相对于宽度分辨率，上/下分辨率相对于高度），或


• 左/右/上/下百分比全部以宽度分辨）

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

注意：这个差异很糟糕，但是它准确地捕捉了世界的当前状态（实现之间没有共识，CSSWG没有共识）。 CSSWG的意图是浏览器会收敛到其中一个行为，在这个时候规范将被修改。

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.

这篇关于为什么Firefox中的flex项目不使用百分比填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！