Почему ширина меняется на родителя и его родного брата, который увеличился на 1 при установке определенной ширины для элемента

Question

Почему мои столбцы с изменяемыми размерами (которые имеют размер 1) имеют разный размер, когда я задаю ширину item4?

Как я могу иметь элемент фиксированной ширины внутри объекта, чтобы оба объекта роста оставались одинаковымиразмер?

.main {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.outerSettings {
  display: flex;
  flex-direction: row;
}

.resizableColumn {
  display: flex;
  flex-grow: 1;  
  flex-direction: column;
}

.fixedColumn {
  display: flex;
  flex: 0 0 50px;
  flex-direction: column;
}

.item1 {
  height: 50px;
  background-color: red;
}

.item2 {
  height: 50px;
  background-color: blue;
}

.item3 { 
  height: 50px;
  background-color: yellow;
}

.item4 { 
  height: 50px;
  width: 50px;
  background-color: green;
}

<div class="main">
  <div class="outerSettings">
    <div class="resizableColumn">
      <div class="item1">
      </div>
      <div class="item1">
      </div>
    </div>
    <div class="resizableColumn">
      <div class="item2">
      </div>
      <div class="item4">
      </div>
    </div>
    <div class="fixedColumn">
      <div class="item3">
      </div>
    </div>
  </div>
</div>