Height bug in Chrome and Safari

[kidwm]

See https://codepen.io/kidwm/pen/prKMQV

[kidwm]

https://codepen.io/anon/pen/Ojarba

I've found out that adding grid-template-columns would fix this issue, but didn't know why.

[rachelandrew]

Apologies for the delay in replying to you - it appears to be related to the percentage padding. If you instead use a fixed length unit there, the layout I assume you were expecting (with the footer below the list) works.

In your example, which I reduced to remove the Sass: https://codepen.io/rachelandrew/pen/gGgbyY?editors=1100 I think adding the single column grid is giving Chrome something to resolve the percentage against.

I wondered if the generated content was the issue but we see the same happening if we nest a grid https://codepen.io/rachelandrew/pen/gGgbyY?editors=1100

There are interop issues with percentage margin and padding anyway, logged here https://github.com/rachelandrew/gridbugs#13-inconsistency-with-percentage-padding-and-margins

and also issues with resolving heights in intrinsic tracks https://bugs.chromium.org/p/chromium/issues/detail?id=750726

Perhaps @mrego has further insights.

[mrego]

and also issues with resolving heights in intrinsic tracks https://bugs.chromium.org/p/chromium/issues/detail?id=750726

Yeah I believe it's due to that Chrome bug.