gridbugs
gridbugs copied to clipboard
rachelandrew
Issue with chrome not calculating cell height/overflow correctly for nested grid
I have a pretty simple header/content/footer grid setup with an additional sidebar column. That sidebar is made of another grid containing it's own header and content cells. I want the two content areas (main and sidebar) to scroll vertically and never overflow the parent grid's height.
Please see: https://codepen.io/martyns/pen/JZXgEj
In Firefox the .sidebar-content div shows a vertical scrollbar (which it how I want it to look and behave) while in Chrome there is no such scrollbar and the content overflows, and then forces the parent grid to overflow horribly.
Anyone see this issue before and/or have any ideas of a simple workaround?
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.
@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);
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
@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).
@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.)