Fix scrolling with box-sizing:border-box


Sometimes, unexpected scrollbars can appear on your website and it's not always obvious why. In most cases, I've found that the fix to this is using the box-sizing: border-box property.


Lets say, for example, I put the height of 100vh onto an element, plus I have padding on there too. That can easily cause vertical scrolling like so: Image of a form with scrolling on the document

This is because the element (the content) is one size, plus the padding is added on top of this content size too. In order to prevent this, I can use the box-sizing: border-box property like so: CSS code utilising box-sizing:border-box to prevent scrolling
This ensures that now, the padding is included in the total size of the content, so I don't have the scrollbar anymore like so: Image of a form with no scrolling on the document