When I add top and bottom padding to a parent element, and the child of that parent does not have a specified height with overflow-y set to auto, there is an issue where the bottom spacing of the parent is not properly applied when scrolling to the bottom. While this issue seems fine in Chrome which follows the CSS box model, other browsers may display this problem.
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.parent {
padding: 30px;
box-sizing: border-box;
height: 100%;
overflow-y: auto;
}<div class="parent">
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</div>
<div>Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text...</div>
</div>