CSS：组合显示：flex和overflow：自动杀死填充

Question

我使用flexbox在父容器中显示子div的动态列表，如果有太多容器，则允许用户滚动它们。我希望孩子和父母之间有一些空间，所以我在父母身上设置了padding: 25px。但是，此填充不会应用于父div的右侧。我该如何解决这个问题？

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/