Право дочернего поля flexbox не применяется

Question

Я хочу сделать равный разрыв для детей flexbox.Я использовал нулевой маржинальный правый угол для каждого дочернего элемента, а затем снова применил маржинальный отступ к последнему дочернему элементу.Но право на право как-то не применяется.Вы можете видеть после того, как вы прокрутили до конца ребенка.

см. Демонстрацию ниже

.flex {
  display: flex;
  background: pink;
  width: 80px;
  overflow: auto;
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}

.item:last-child {
  margin-right: 4px;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

добавить еще один родительский div и дать переполнение для родительского div.Для .flex класса применяются display:inline-flex;, тогда он будет работать

.flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: flex;
  background: pink;
  min-width:100%;
  float:left;
}

.flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: inline-flex;
  background: pink;
  /*min-width:100%;
  float:left;*/
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}

.item:last-child {
  margin-right: 4px;
}

<div class="flex-parent">
 <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 </div>
</div>

Answer 2

.flex {
  display: flex;
  background: pink;
  width: 200px;
  overflow: auto;
justify-content: space-between;
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>