Grid layout with sticky Childs
I am practicing a dummy layout using a grid, I have given the parent of height 100vh and elements that supposed to stick also given a width of 100vh, when I scroll to the very last of the page, the sticky elements content goes up on both sides. Please clarify me on what might be the case and any better approach for it would be welcoming. Please find the codepen
https://codepen.io/naveen570/full/YzdPxvM
3 Replies
Do this everytime you set a new project or you'll run into this issue
Once adding that, it fixed it
Not having it can cause unexpected overflow, making your sticky element not as sticky as you thought
This page has a great example of what it does and how adding it helps:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Basically, if you're using any sort of padding and/or borders, it's pretty important
box-sizing - CSS: Cascading Style Sheets | MDN
The box-sizing CSS property sets how the total width and height of an element is calculated.
oh damn, i always use that, i selected css reset option in the codepen. so i that it included it for that, seems it didn'tš
. Thanks for the response.