在项目上设置特定宽度时，为什么父级及其同胞的宽度更改为1？

Question

为什么设置item4的宽度时，可调整大小的列（都增长1）的大小不同？

我如何在一个草木中固定宽度的项目，以使两个草木保持相同的大小？

.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>