I am missing something very obvious here. Why in this example the parent is scrolling rather then a child? I would expect that I will see the whole parent (so the bottom padding would be visible) and only child would be scrolling.
.section {
height: 300px;
min-height: 300px;
max-height: 300px;
width: 300px;
padding: 1rem;
overflow: scroll;
background-color: blue;
}
.content {
display: block;
height: 200%;
background-color: pink;
}<div class="section">
<div class="content">
</div>
</div>