子元素内容超出父元素时，padding-right失效，没有留白

场景介绍

父元素内有数量不固定的子元素，当子元素宽度之和小于父元素时，子元素平均分配父元素宽度；当子元素宽度之和大于父元素时，子元素有最小宽度，滚动条显示。
1. 子元素宽度小于父元素，上下左右留有空白

2. 子元素宽度大于父元素，上下左右留有空白

错误实现

<div class="box">
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
</div>
.box {
  width: 500px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  overflow: auto;
  box-sizing: border-box;
}
.con1 {
  flex: 1;
  min-width: 100px;
  height: 80px;
  border: 1px solid red;
}

当子元素宽度之和大于父元素时，上下左都留有空白，右无空白

正确实现方式

方法1：多增加一层包裹元素

<div class="box method-one">
  <div class="content">
    <div class="con1"></div>
    <div class="con1"></div>
    <div class="con1"></div>
    <div class="con1"></div>
    <div class="con1"></div>
  </div>
</div>
/*附加样式*/
.method-one {
  padding: 0;
}
.content {
  flex: 1;
  display: flex;
  padding: 20px;
}

方法2：after伪元素添加宽度为20的占位元素

<div class="box method-two">
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
  <div class="con1"></div>
</div>
/*附加样式*/
.method-two {
  padding-right: 0;
}
.method-two::after {
  content: '';
  width: 20px;
  flex-shrink: 0;
}

文中代码对应demo
看似简单的问题却又不简单，奥力给！！
如有不对的地方或者好的实现方式，欢迎指正哦！