Flex Elements Ignore Percent Padding in Firefox

Flex elements ignore percent padding in Firefox

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.

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

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.

Percentage padding / margin on grid item ignored in Firefox

I found a solution:
I had to add a wrapper to the cell with a 'width: 100%' rule and it finally works on Firefox 52!

#grid{  display: grid;  grid-gap: 8px;  grid-template-columns: 100px 100px;}.cell{  width: 100%;}.inner{  background-color: red;  padding-bottom: 50%;}

<div id="grid">  <div class="cell">    <div class="inner"></div>  </div>  <div class="cell">    <div class="inner"></div>  </div>  <div class="cell">    <div class="inner"></div>  </div>  <div class="cell">    <div class="inner"></div>  </div></div>

Flexbox padding bottom fails in Firefox and Safari

I'm not exactly sure why the padding-bottom fails in Firefox and Safari. It may have something to do with the container being over-constrained. But that's just a guess.

What I am more certain about, however, is a reliable, cross-browser solution. Pseudo-elements on a flex container are rendered as flex items. So instead of padding use ::before and ::after.

.container {  display: flex;  width: 200px;  height: 500px;}
.parent {  display: flex;  flex-direction: column;  background: red;  /* padding-top: 20px; */  /* padding-bottom: 20px; */  overflow: auto;  flex: 1;}
/* NEW */.parent::before,.parent::after {  flex: 0 0 20px;  content: '';}
.child {  flex: 1 0 100px;  background: green;  border: 1px solid blue;}

<div class="container">  <div class="parent">    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>  </div></div>

Flexbox with percentage width on firefox not working

I highly advise against using the margin-bottom: -99999px; padding-bottom: 99999px work-around.
If you want a fluid layout(I assume this is what the question is about?) with 14%, 86% split, just use plain old CSS instead of Flex.

http://jsfiddle.net/97dtV/7/

Why re-invent the wheel. If you are looking for a better way of laying out your site, try the "grid" approach.

• Semantic Grid (http://semantic.gs/)
• Bootstrap - (http://twitter.github.com/bootstrap/index.html)

This assumes that you don't need flex for some specific reason, if you do then ignore this ;). Also, consider backward-compatibility when using CSS3 specific attributes!

---

Related Topics