Почему align-self: stretch не работает с гибким элементом?

.box {
  width: 300px;
  height: 300px;
  background: aqua;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: baseline;
  align-content: stretch;
}

.item {
  width: 50px;
  height: 50px;
  background: rgb(243, 62, 92);
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
}

.box .one {
  /* padding-top: 20px; */
  background: red;
  /* order: 1; */
  /* flex-shrink: 1; */
  align-self: stretch;
  height: auto; /* new */
}

.box .two {
  background: coral;
  order: 2;
  flex-shrink: 1;
}

.box .three {
  background: forestgreen;
  order: 31;
  flex-shrink: 1;
}

.box .four {
  background: tomato;
  order: 4;
}

<div class = "box">
  <div class = "item one">项目1</div>
  <div class = "item two">项目2</div>
  <div class = "item three">项目3</div>
  <div class = "item four">项目4</div>
</div>