While scrolling down the .parent div, you should notice that its red background appears at the bottom due to the padding-bottom property. Interestingly, this effect is visible in Chrome but not in Safari and Firefox.
.container {
display: flex;
width: 200px;
height: 500px;
}
.parent {
display: flex;
flex-direction: column;
background: red;
padding-top: 20px;
padding-bottom: 20px;
overflow: auto;
flex: 1;
}
.child {
flex: 1 0 100px;
background: green;
border: 1px solid blue;
}<div class="container">
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
</div>
</div>codepen: http://codepen.io/anon/pen/NpvJPY
Edit: This question is distinct from the suggested duplicate as it pertains to an issue with fixed pixel padding rather than percentage-based padding in the duplicate.