子元素內容超出父元素時，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
看似簡單的問題卻又不簡單，奧力給！！
如有不對的地方或者好的實現方式，歡迎指正哦！