html - Flex 元素忽略 Firefox 中的填充百分比

Question

我正在尝试向 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>

Chrome :

火狐:

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

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

Answer 1

参见 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.

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

Flexbox % Follow-Up

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

当前Flexbox spec对此发出警告:

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.

然而，最近 CSS WG resolved (使用 some controversy ):

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

查看更新的 editor's draft .