flexの右余白ができてしまう。

flexの右余白ができてしまう。
子要素に flex-grow:1を設定する。

html

 <h2>flex-growの初期値</h2>
  <div class="flex">
    <div class="flex-item flex-1">flex-grow:0</div>
    <div class="flex-item flex-2">flex-grow:0</div>
    <div class="flex-item flex-3">flex-grow:0</div>
  </div>
  <h2>flex-grow:1をいれた場合</h2>
  <div class="flex">
    <div class="flex-item flex-4">flex-grow:1</div>
    <div class="flex-item flex-5">flex-grow:1</div>
    <div class="flex-item flex-6">flex-grow:1</div>
  </div>

css

.flex {
    display: flex;
    flex-wrap:wrap;
    text-align: center;
  
    gap: 5px 5px;
    margin: 20px 0 30px;
  }
  
  .flex-item {
    width: 100px;
   font-size: 13px;
   font-weight: bold;
    height:70px;
  }
  .flex-1{
    background-color: blueviolet;
  }
  .flex-2{
    background-color: rgb(198, 201, 34);

  }
  .flex-3{
    background-color: rgb(226, 43, 43);

  }
  .flex-4{
    background-color: blueviolet;
    flex-grow: 1;
  }
  .flex-5{
    background-color: rgb(198, 201, 34);
    flex-grow: 1;
  }
  .flex-6{
    background-color: rgb(226, 43, 43);
    flex-grow: 1;
  }