为什么百分比填充/边距在Firefox和Edge中的弹性项目上不起​​作用? [英] Why doesn't percentage padding / margin work on flex items in Firefox and Edge?

问题描述

我想在flexbox内放置一个Square 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

推荐答案

2018更新

flexbox规范已更新.

The flexbox specification has been updated.

4.2.弹性项目边距和填充

弹性项目(如块状项目)上的边距和填充百分比 框，将根据其包含块的内联大小进行解析， 例如左/右/上/下百分比均针对其百分比进行解析 在水平书写模式下包含块的宽度.

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版本

---

Original Answer - applies to FF and Edge versions released before 2018

从 flexbox规范:

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

还有更多内容:

4.2.弹性项目边距和填充

弹性项目上的边距和填充百分比可以根据以下任一条件进行解析:

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和Edge中的弹性项目上不起​​作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！