Safari align-content: center bug with nested grid container

[clausti]

When a grid container is nested inside another grid container, and the inner grid container occupies the same grid cells as a sibling element with greater computed height, the inner grid container fails to align-content: center.

In my original observation and my minimal repro case, it drops the content into what should be the padding-bottom. I see this in both iOS 13.3 and desktop Safari Version 13.0.4 (14608.4.9.1.4). If the inner grid container's text wraps to a second line, the alignment bug goes away because the sibling element no longer has greater computed height.

Workaround: If you're using display: grid just to get the vertical alignment, use display: flex instead. In the below screenshot, the html for fig A and fig B is identical apart from the labels and the inner grid container's display property. Fig. A's is flex and Fig B's is grid.

[gsnedders]

https://codepen.io/gsnedders/pen/GRJWzdP?editors=1100 perhaps makes this clearer.

I'd recommend filing a bug against WebKit for this.