Bug 246451

Created attachment 462956 [details]
Screenshot in Safari

Element in grid container with aspect-ratio, padding and align-content: end is placed outside grid if grid container is nested in another grid container.

I have replicated the bug in the following code pen: https://codepen.io/johannesodland/pen/xxjMgzr

```html
  <section>
    <div class="hero">
      <h2>Title</h2>
    </div>
  </section>

```

```css
:root {
  --_padding: 15px;
}

section {
  display: grid;
}

.hero {
  display: grid;
  background-color: silver;
  aspect-ratio: 16 / 9;
  padding: var(--_padding);
  align-content: end;
  justify-items: start;
}

h2 {
  margin: 0;
  padding: var(--_padding);
  background: mediumorchid;
}

```

Expected result: h2 is rendered inside padding at the bottom of the containing grid element.
This is correct in Chrome and Firefox.

Actual result: h2 is rendered 2 x padding below where it is expected, 1 x padding outside containing grid.


The bug also happens if the grid is inside a flex container, but not if its in a flow container.