Flex elements ignore percent padding in Firefox

Question

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

Answer 1

The current draft spec says

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.

So, Firefox is now incorrect according to the latest draft.

CSSWG discussion: https://github.com/w3c/csswg-drafts/issues/2085 Spec changelog reference: https://drafts.csswg.org/css-flexbox/#change-2017-margin-padding-percent Current spec on flex item margins: https://drafts.csswg.org/css-flexbox/#item-margins

Answer 2

Try this:

.padded {
    padding-bottom: 10vw;
}

Answer 3

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.

Answer 4

For me this does the trick: adding display: table to the div. Don't know if that causes other problems though.

    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>