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

Question

I am using padding-top to force the aspect ratio of a div to 16:9. The contents of the div are positioned absolutely and expand to fill the div.

HTML:

<div class = "ratio-16-9">
  <p>This p element is in a div with an aspect ratio of 16:9.</p>
</div>

CSS:

.ratio-16-9 {
  padding-top:56.25% /* Yields 16:9 aspect ratio. */;
  position:relative;
}

.ratio-16-9 > p {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

It works nicely to achieve the aspect ratio, but the div is overflowing my CSS Grid container for some reason.

Here is a fiddle with the working example of the problem: https://jsfiddle.net/uo63yyer/30/

* {
  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-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>

score 2 · Accepted Answer · edited May 23 '17 at 12:34

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>

https://jsfiddle.net/uo63yyer/31/

Also, be aware that using percentage-based padding on grid items may render differently across browsers. Percentage padding on grid item being ignored in Firefox

I never thought to look at the column sizing because it seemed like a height issue! Thank you! Since the % padding can be problematic, is there a better way to get CSS bases constant aspect ratios? — Frank, May 17 '17 at 02:48
Well, percentage padding can be a problem on *grid items*. But your `.ration-16-9` element is not a grid item. It's a child of a grid item and, therefore, outside the scope of grid layout. — Michael Benjamin, May 17 '17 at 02:53
Ah, thank you for the clarification and new insight into my issue. — Frank, May 17 '17 at 02:54
However, I posted the cautionary note at the end because I'm not sure how the browsers will compute width on grid items when calculating a descendant's percentage padding. — Michael Benjamin, May 17 '17 at 02:54
Both grid and flex items have the same issue with percentage padding. This flex post has some workaround suggestions. http://stackoverflow.com/q/36783190/3597276 — Michael Benjamin, May 17 '17 at 02:56

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

1 Answers1

Linked