Container Scrolls To Top When Children Element Height Changes

I came across a bit quirky behavior. At least it seems quirky to me. You can check it out here: https://fiddle.jshell.net/mxmcd9Lw/8/show/ Mainly when a element's height changes it

Solution 1:

This seems to happen most times when the grid-area is set to something dynamic and has overflow - for example if you set .l-page to grid-template-rows: repeat(4, auto) the bug is still present, but in grid-template-rows: repeat(4, 100px) it is not.

I have found a work-around that works in Chrome. Setting .l-page to grid-template-rows: auto auto auto minmax(1px, 1fr); somehow keeps the scroll position as you would expect. I don't know why though.

Here's the modified fiddle: https://fiddle.jshell.net/mxmcd9Lw/59/

Also, worth noting in Firefox Developer Edition v60 the bug appears to be fixed - your example works fine there. So I assume this is a known bug that will be resolved by browsers shortly.