Flex 元素在 Firefox 中忽略百分比填充答案

【问题标题】：Flex elements ignore percent padding in FirefoxFlex 元素在 Firefox 中忽略百分比填充
【发布时间】：2016-02-03 19:36:28
【问题描述】：

我正在尝试为 display:flex 元素内的元素添加填充。当填充定义为百分比时，它不会在 Firefox 中显示，但在 px 中定义时会显示。这两种情况在 Chrome 中都按预期工作。

div {
    background: #233540;
}
div > div {
    color: #80A1B6;
}
.parent {
    display: flex;
}
.padded {
    padding-bottom: 10%;
}

<div class="parent">
    <div class="padded">
        asdf
    </div>
</div>

铬：

火狐：

编辑：这可能是因为 Mozilla 决定根据父容器的高度来解释垂直百分比。对我来说似乎很疯狂。 https://bugzilla.mozilla.org/show_bug.cgi?id=851379

编辑 2：是的，似乎规范实际上将垂直填充和边距定义为根据容器的高度解析，所以也许 Chrome 是不遵守规范的？ https://drafts.csswg.org/css-flexbox/#item-margins

【问题讨论】：

RE：编辑 2：实际上，规范将其定义为浏览器可以选择使用高度或宽度作为顶部/底部边距/填充，只要它们一致并且始终使用其中一个适用于所有情况。因此，Firefox 和 Chrome 都在遵守规范。
最佳答案可能也是遵循当前规范：“作者应避免在弹性项目的填充或边距中完全使用百分比，因为它们在不同的浏览器中会出现不同的行为。”

标签： html css firefox flexbox

【解决方案1】：

见https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

网格/弹性百分比

小组试图研究垂直百分比边距如何和填充定义。

注意：传统上，CSS 中的顶部和底部边距解决包含块宽度而不是其高度，它有一些有用的效果，但通常是奇怪。现有的布局模式当然必须继续这样做。

之前的组解决方案是针对选项 2（如下），但是谷歌觉得他们有关于 abspos 的新信息值得重新考虑的行为。

讨论归结为三个潜在的解决方案：

选项 1：始终根据宽度解析百分比。

选项 2：网格和 flex 解决高度问题，以及 abspos 项目始终根据宽度解析。

选项 3：Grid 和 flex，包括它们的 abspos 项，解决身高问题。 Abspos 其他地方继续解决宽度问题。

在一项民意调查中，该组在选项 1 和 3。

Microsoft 会反对选项 1，Google 会反对选项 3，所以讨论陷入僵局，将继续在 F2F 期间私下里，希望能得出一个结论。

见https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html，

Flexbox % 跟进

[...] 仍然没有结论。

当前的Flexbox spec 对此发出警告：

flex items 上的百分比边距和填充可以解决反对：

他们自己的轴（左/右百分比根据宽度解析，顶部/底部根据高度解析）

内联轴（左/右/上/下百分比都根据宽度解析）

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

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

作者应完全避免在 flex items 的填充或边距中使用百分比，因为它们会在不同的浏览器。

不过，最近 CSS WG resolved（与 some controversy）：

flexbox 和网格项目的顶部和底部边距和填充百分比都根据可用的内联方向解析。

查看更新后的editor's draft。

【讨论】：

哇。感谢您在政治等方面的广泛采购，非常有用。关于实际定义比率的任何建议？ css-tricks.com/aspect-ratio-boxes
Oriol 的回答非常有帮助。一些好消息：截至 2018 年 1 月，Edge 和 FF 都同意在下一版本的 Edge 和 v60 的 FF 中实施当前的 Chrome 方法。请参阅：bram.us/2017/07/30/… 了解更多信息。

【解决方案2】：

对我来说，这就是诀窍：将 display: table 添加到 div。不知道这是否会导致其他问题。

    div {
        background: #233540;
        display: table;
    }
    div > div {
        color: #80A1B6;
    }
    .parent {
        display: flex;
    }
    .padded {
        padding-bottom: 10%;
    }

    <div class="parent">
        <div class="padded">
            asdf
        </div>
    </div>

【讨论】：

是的，更改父级的display 确实会改变这种行为，但问题是关于flex 元素。
虽然这并不能真正回答问题，但它确实提供了解决手头问题的技巧，目前在更普遍的基础上仍未解决。

【解决方案3】：

试试这个：

.padded {
    padding-bottom: 10vw;
}

【讨论】：

为提高您的回答质量，请说明提问者问题的可能原因以及您建议的回答如何构成改进。包括指向您认为对此事有用的任何资源的链接。
这对我来说是完美的解决方案。不知道为什么没有人支持它。
如果您希望它在某个宽度上保持静态，这将不起作用，因为宽度与父容器无关，它是整个浏览器的宽度（这意味着它将保持填充尽可能远随着浏览器的增长——当你有一个最大宽度的容器时，这是不想要的）。

【解决方案4】：

目前的草案规范说

弹性项目上的百分比边距和内边距，如块框上的百分比，是根据其包含块的内联大小来解决的，例如在水平书写模式下，左/右/上/下百分比都根据其包含块的宽度解析。

因此，根据最新草案，Firefox 现在是不正确的。

CSSWG 讨论：https://github.com/w3c/csswg-drafts/issues/2085 规格变更日志参考：https://drafts.csswg.org/css-flexbox/#change-2017-margin-padding-percent 当前关于弹性项目边距的规范：https://drafts.csswg.org/css-flexbox/#item-margins

【讨论】：

现在已在 Firefox 60 中修复 - bugzilla.mozilla.org/show_bug.cgi?id=958714