Issue with chrome not calculating cell height/overflow correctly for nested grid about gridbugs

[jwdunn1]

As a workaround, for both browsers, try setting the .sidebar class to grid-template-rows: 20px 170px; The 170px accounts for the original fixed height of 200px minus the header and border.

[martyns]

@jwdunn1 Thanks for that suggestion, that does seem to work for the example. Unfortunately the real-world situation this was inspired by is a bit more dynamic and the height of the main .container, and therefore also the .sidebar is dynamic so I can't hard-code the height in the css is this way.

I tried using calc but that doesn't make a difference to the rendering i.e.

grid-template-rows: 20px calc(100% - 20px);

[jwdunn1]

Perhaps an alternative workaround: remove the nested grid.
From the .sidebar remove:
display: grid; grid-template-rows: 20px auto; height: 100%; max-height: 100%
And add: overflow: auto;
Then add position: sticky; and top: 0; to the .sidebar-header;
See forked example: https://codepen.io/anon/pen/vrXYQq

[martyns]

@jwdunn1 Thanks again. That definitely works, just a shame we have to live with the scrollbar in the sidebar header but close enough I think 👍.

Interestingly, I tried to workaround the issue with flexbox: https://codepen.io/anon/pen/eKdzzv but it has the exact same issue (i.e. works in Firefox but overflows in Chrome/Edge).

[jwdunn1]

@martyns To remove the scrollbar in the sidebar header, I made a few more adjustments (works in Chrome and Firefox): https://codepen.io/anon/pen/dKpXKw (Basically, removing the .sidebar division and reassigning the sidebar header and content into their own cells of the original grid.)