Flex elements ignore percent padding in Firefox

by

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.

More Related Contents:

  1. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  2. Flexbox column-reverse in Firefox, Edge and IE
  3. Different implementation of Flexbox in Firefox and Chrome
  4. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  5. How to place elements like this
  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. flex property not working in IE
  10. Last margin / padding collapsing in flexbox / grid layout
  11. Equal width flex items even after they wrap
  12. How to center elements on the last row in CSS Grid?
  13. input / button elements not shrinking in a flex container
  14. How can I combine flexbox and vertical scroll in a full-height app?
  15. Why isn’t object-fit working in flexbox?
  16. text-overflow is not working when using display:flex
  17. Removing margin from flex items when they wrap
  18. Calculator keypad layout with flexbox
  19. Flexbox alternative for IE9
  20. Prevent flex items from stretching
  21. Flex items not respecting margins and box-sizing: border-box
  22. Flex item should align left, not center, when it wraps
  23. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  24. Why are some of my CSS rules not working?
  25. Why does flex-box work with a div, but not a table?
  26. What are the default values for justify-content & align content?
  27. How to make a flex item not fill the height of the flex container? [duplicate]
  28. Is it possible to change the order of list items using CSS3?
  29. 2 colors in one placeholder of input field
  30. Alignment of content vertically in adjacent flexbox containers

Leave a Comment