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

Solution 1

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.

Solution 2

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>

Solution 3

Try this:

.padded {
    padding-bottom: 10vw;
}

Solution 4

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

View more solutions

Comments

[nvioli]

Yes, changing the display of the parent does change this behavior, but the question is specifically about flex elements.

[toonice]

To improve the quality of your Answer, please include an explanation of the likely cause of the Questioner's problem and how your suggested answer constitutes an improvement. Include links to any resources you find useful on the matter.

[americanknight]

This was the perfect solution for me. Not sure why no one else have upvoted it.

[ha404]

This wont work if you want it to stay static at a certain width since the width isn't relative to the parent container, it's the width of the entire browser (meaning it'll keep padding as far as the browser grows–something not desired when you have a container with a max width).

[nvreez]

Wow. Thank you for your extensive sourcing on the politics etc, very useful. Any recommendation on actually defining ratios? css-tricks.com/aspect-ratio-boxes

[oligofren]

Although this doesn't really answer the question, it does provide a hack that fixed the problem at hand, which currently remains unsolved on a more general basis.

[Bob]

Oriol's answer was/is extremely helpful. Some good news: as of January 2018 both Edge and FF have agreed to implement the current Chrome method with next version of Edge and v60 of FF. See: bram.us/2017/07/30/… for more information.

[Daniel Crabtree]

This is now fixed in Firefox 60 - bugzilla.mozilla.org/show_bug.cgi?id=958714