为什么百分比填充/边距不适用于 Firefox 和 Edge 中的弹性项目？

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

弹性项目上的百分比边距和填充，如块上的那些 框，根据其包含块的内联大小进行解析， 例如左/右/上/下百分比都解决了他们的问题 在水平书写模式下包含块的宽度。

---

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

来自flexbox specification：

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

这里还有一些：

4.2. Flex Item Margins and Paddings

弹性项目的百分比边距和内边距可以通过以下任一方式解决：

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

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

注意：这种差异很糟糕，但它准确地捕捉到了世界的当前状态（实现之间没有共识，CSSWG 内部也没有共识）。 CSSWG 的意图是让浏览器集中在其中一种行为上，届时将修改规范。

Answer 2

除了Michael_B's answer，这里还有一个可能的解决方法。

当使用百分比时，我们通常将其与视口宽度相关联，因此请记住这一点，视口单位 vw/vh 可以作为一个选项，因为它的工作原理类似（响应式）。

堆栈sn-p

.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>

---

根据评论更新

如果一个正方形是必须的，并且不能使用视口单位或脚本，这里是另一个使用虚拟图像的技巧。

注意，作为图像，SVG 或 Base64 也可以用作datauri，以节省到服务器的额外往返行程

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
}
.inner img {
  display: block;
  width: 100%;
  visibility: hidden;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/10" alt="">
  </div>
</div>