html - 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的 flex 元素？

Question

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

2018 年更新

flexbox 规范已更新。

4.2. Flex Item Margins and Paddings

Percentage margins and paddings on flex items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.

---

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

来自 flexbox specification :

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

还有一些:

4.2. Flex Item Margins and Paddings

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

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

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.