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

Sstealthy I am practicing a dummy layout using a grid, I have given the parent of height 1...

croganm•8/21/23, 3:03 PM

*, *:before, *:after {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: border-box;
}

croganm•8/21/23, 3:03 PM

Do this everytime you set a new project or you'll run into this issue

croganm•8/21/23, 3:04 PM

Once adding that, it fixed it

croganm•8/21/23, 3:05 PM

Not having it can cause unexpected overflow, making your sticky element not as sticky as you thought

croganm•8/21/23, 3:06 PM

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.

stealthyOP•8/22/23, 1:17 PM

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.