为什么百分比填充/边距对 Firefox 和 Edge 中的弹性项目不起作用?

2022-01-30 00:00:00 firefox html css flexbox

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

推荐答案

2018 年更新

flexbox 规范已更新.

The flexbox specification has been updated.

4.2.Flex 项目边距和填充

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

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 规范:

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

这里还有一些:

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

相关文章