CSS Grid Makes Page Auto Scroll

Issue

I have been looking on the forums for a fix on this, and the closest thing I can find is this. But doesn't seem to have a solution.

I have a CSS grid that's grid-template-columns: repeat(auto-fill,minmax(70px,1fr));, whose parent element has a max-height: 350px; overflow-y: auto;. When I "select" the items in the grid, all works well 'till I scroll far enough down and select an item, it then scrolls the whole page down. Inspecting the elements, the items in the grid seem to continue to scroll to the top of the page (hidden from view of course), but once those items reach the top of the page that's when it auto scrolls the whole page.

I tried to make a working demo on here, but it's not replicating, not sure if that's because it's in an Iframe or not? Here is a link to what I am working on: https://fathomless-brook-11892.herokuapp.com/product/64e6566b3ec4190ccdecb5ba

If you inspect it, and find the "*" in the CSS and uncheck max-height: -webkit-fill-available;, and then start scrolling down and selecting a different fabric. You'll notice the page abruptly scrolls down. Having that there seems to be the only way I can get this to work as intended. But I believe it's the wrong way to do it?

Any help is greatly appreciated!

Solution

Not really sure why it works, but setting the "Body" to position: fixed; seemed to solve the problem. It works like max-height: -webkit-fill-available;, but now when I embed this in other places, it works as expected now.

Answered By - Wade Morrison