Flex 元素在 Firefox 中忽略百分比填充 [英] Flex elements ignore percent padding in Firefox

问题描述

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

div {背景:#233540；}div >div {颜色:#80A1B6；}.父母{显示:弹性；}.填充{填充底部:10%；}

<div class="padded">自卫队

铬:

火狐:

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

编辑 2:是的，看起来规范实际上将垂直填充和边距定义为根据容器的高度解析，所以也许 Chrome 是不遵守规范的人?https://drafts.c​​sswg.org/css-flexbox/#item-margins

解决方案

参见 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.
  • 微软会反对选项 1，谷歌会反对选项 3，所以讨论陷入僵局并将继续在 F2F 期间私下进行，希望能得出结论.

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

<块引用>

Flexbox % 跟进

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

当前的Flexbox 规范 警告:

<块引用>

弹性项目的百分比边距和内边距 可以解决反对:

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

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

<块引用>

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

<块引用>

作者应避免在 弹性项目，因为它们在不同的浏览器.

然而，最近 CSS WG 解决了(与一些争议):

<块引用>

flexbox 和 grid 项目的顶部和底部边距以及填充百分比都根据可用的内联方向进行解析.

查看更新后的编辑草稿.

I'm trying to add padding to an element inside a display:flex element. When the padding is defined as a percent, it doesn't display in Firefox, though it does when defined in px. Both cases work as expected in Chrome.

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

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

Chrome:

Firefox:

Edit: This may be because of Mozilla's decision to interpret vertical percentages with respect to the height of the parent container. Seems crazy to me. https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Edit 2: Yes, it appears that the spec actually defines vertical padding and margin as being resolved against the container's height, so perhaps Chrome is the one not honoring the spec? https://drafts.csswg.org/css-flexbox/#item-margins

解决方案

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

Grid/Flex Percentages

• The group tried to work through how vertical percentage margins and paddings are defined.
  • Note: Top and bottom margins in CSS have traditionally resolved against the containing block width instead of its height, which has some useful effects but is generally surprising. Existing layout modes must of course continue to do so.
  • Previous group resolution had been for option 2 (below), but Google felt they had new information regarding abspos behavior that merited reconsideration.
  • The discussion came down to three potential solutions:
    • Option 1: Always resolve percents against the width.
    • Option 2: Grid and flex resolve against height, and abspos items always resolve against the width.
    • Option 3: Grid and flex, including their abspos items, resolve against the height. Abspos elsewhere continue to resolve against the width.
  • In a straw poll the group was pretty evenly divided between options 1 and 3.
  • Microsoft would object to option 1 and Google to option 3, so the discussion reached an impasse and will be continued privately during the F2F in hopes of reaching a conclusion.

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

Flexbox % Follow-Up

• [...] there was still no conclusion.

The current Flexbox spec warns about this:

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)
• 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 to require that.

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

However, more recently the CSS WG resolved (with some controversy):

Both flexbox and grid items top and bottom margin and padding percent resolves against the available inline direction.

See the updated editor's draft.

这篇关于Flex 元素在 Firefox 中忽略百分比填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！