CSS grid height layout issue with grid item child height in Firefox 52

Question

I've recently redesigned my website utilizing CSS grid and I've come across a specific problem with FireFox 52. I know FireFox has issues, so I'm looking for some help on how to solve this little layout issue.

https://codepen.io/Krazyhawk/pen/qyJmWQ

Example HTML

<div class="grid">
  <div class="item"><div></div></div>
  <div class="item">
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
  </div>
  <div class="item"></div>
</div>

Example CSS

.grid {
  width: 1200px;
  display: grid;
  grid-template-columns: 60% 1fr;
}
.item:first-child {
  background-color: blue;
  padding-right: 30px;
}
.item:first-child > div {
  position: relative;
  padding-bottom: 56.25%;
  background-color: purple;
}
.item:nth-child(2) {
  background-color: yellow;
}
.item:nth-child(3) {
  background-color: grey;
  grid-column: 1/3;
  margin-top: 16px;
  height: 50px;
}

I have two columns, and one underneath. The left column has a div in it that is used as an iframe container. To make that iframe responsive, it gets its height using a padding-bottom percentage. The right column is just a column with content, as well as the bottom one.

The issue lies with the padding-bottom percentage. The grid layout isn't recognizes the height of the div with padding-bottom, therefore the bottom bar doesn't allow enough space atop of it.

The solution solves itself if the left column has a height, but that's something I'd like to avoid. Giving it a height and keeping it responsive would likely require some JS and the resize event once the layout got down to tablet size (liquid layout).

As far as I know, this layout issue is specific to FireFox 52 (normally would cut it loose, but there is still a good chunk of user percentage).