Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?

by

2018 Update

The flexbox specification has been updated.

4.2. Flex Item Margins and Paddings

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.

Original Answer – applies to FF and Edge versions released before 2018

From the flexbox specification:

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

Here’s some more:

4.2. Flex Item Margins and Paddings

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), or,
  • 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.

More Related Contents:

  1. Flexbox column-reverse in Firefox, Edge and IE
  2. Different implementation of Flexbox in Firefox and Chrome
  3. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  4. Flex elements ignore percent padding in Firefox
  5. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  6. Hide scroll bar, but while still being able to scroll
  7. Flexbox code working on all browsers except Safari. Why?
  8. How to center a flex container but left-align flex items
  9. Left column and stacked right column using flexbox CSS [duplicate]
  10. Align an element to bottom with flexbox
  11. Force flex item to span full row width
  12. Flexbox and Internet Explorer 11 (display:flex in ?)
  13. What’s the difference between flex-start and baseline?
  14. ‘position: sticky’ not working when ‘height’ is defined
  15. Flexbox affects overflow-wrap behavior
  16. How to align flexbox columns left and right?
  17. Flexbox resize and scrollable overflow [duplicate]
  18. How do I make Firefox auto-refresh on file change?
  19. Prevent a child element from overflowing its parent in flexbox [duplicate]
  20. Why isn’t position:sticky with left:0 working inside a scrollable container?
  21. Chrome does not expand flex parent according to children’s content [duplicate]
  22. CSS object-fit: contain; is keeping original image width in layout
  23. Flexbox on IE11: image stretched for no reason?
  24. Firefox 30 is not hiding select box arrows anymore
  25. extra space when centering elements using flexbox
  26. text-decoration not working for visited state link
  27. Make flex container take width of content, not width 100%
  28. justify-content: space-between failing to align elements as expected
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment