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

问题描述

我想在 flexbox 中有一个方形 div.所以我使用:

.outer {显示:弹性；宽度:100%；背景:蓝色；}.内{宽度:50%；背景:黄色；填充底部:50%；}

<div class="inner"><a>呵呵</a>

这在 Chrome 中运行良好.但是在 Firefox 中，父级压缩到只有一行.

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

您也可以在 https://jsbin.com/lakoxi/edit?html 查看代码,css

解决方案

2018 更新

Flexbox 规范已更新.

<块引用>

4.2.Flex 项目边距和填充

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

---

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

来自 flexbox 规范:

<块引用>

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

还有一些:

<块引用>

4.2.Flex 项目边距和填充

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

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

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

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

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>

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

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

You can also view the code at https://jsbin.com/lakoxi/edit?html,css

解决方案

2018 Update

The flexbox specification has been updated.

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.

---

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

From the flexbox specification:

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

Here's some more:

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.

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