Flexbox-为什么50％的列不填充行？

Question

看看下面的代码，为什么宽度为50％的每一列都不能填充行：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 3px solid #6874E8;
  padding: 10px;
}

.item {
  border: 1px solid #ccc;
  padding: 20px;
  flex-basis: 50%;
}

<div class="container">
  <div class="item first">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item last">Item 6</div>
</div>