Percentage Padding/Margin on Grid Item Ignored in Firefox

#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>

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.

Using percentage padding trick to maintain aspect ratio causes overflow in CSS Grid

The problem appears to be the use of auto to size the grid column:

#content {
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

Percentage padding is calculated with respect to the width of the containing block (spec).

For whatever reason, the auto value is being ignored for this purpose by the browser.

If you switch from auto to fr units, the layout works as intended.

#content {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto auto;
}

* {  box-sizing: border-box;  margin: 0;  padding: 0;}
html {  height: 100%;  width: 100%;}
body {  background-color: #404040;  min-height: 100%;  width: 100%;}
p {  color: #f0f0f0;  text-align: center;}
#content {  display: grid;  /* grid-template-columns:auto; */  grid-template-columns: 1fr;  grid-template-rows: auto auto auto auto;}
.topic {  background-color: #808080;  min-height: 100px;  margin: 8px;  padding: 8px;}
.ratio-16-9 {  background-color: #0080f0;  padding-top: 56.25%;  /* If you comment out the line above and uncomment the line below, things work propperly, but the aspect ratio is not maintained. */  /*height:300px;*/  position: relative;}
.ratio-16-9>p {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;}

<div id="content">  <div class="topic">    <div class="ratio-16-9">      <p>This p element is in a div with an aspect ratio of 16:9.</p>    </div>  </div>  <div class="topic"></div>  <div class="topic"></div>  <div class="topic">    <div>      <!-- Uncomment the line below and things work propperly. -->      <!--<p>This p element is in a propperly sized div and it works as one might expect it to.</p>-->    </div>  </div></div>

.product-wrap {
    min-height: 254px;
}

.product-wrap {
    min-height: 300px;
}