CSS: Combining display:flex and overflow:auto kills padding

Question

I'm using flexbox to display a dynamic list of child div's inside a parent container, allowing the user to scroll through them if there are too many. I want some space between the children and the parent, so I have set padding: 25px on the parent. This padding is however not applied on the right side of the parent div. How can I fix this?

HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS:

div.parent {
  border: 5px solid green;
  width: 250px;
  height: 200px;
  padding: 25px;
  display: flex;
  overflow: auto;
}
div.child {
  flex: 0 0 200px;
  margin: 5px;
  border: 5px solid red;
}

JSFiddle: https://jsfiddle.net/2f4154s0/4/