砌块问题内垂直对齐的内联柔性

Question

看下面的例子：

.item {
  padding: 16px;
  height: 50px;
}

.first {
  background-color: red;
  display: inline-flex;
}

.second {
  background-color: green;
  display: inline-flex;
  align-items: center;
}

<div>
  <div class="item first">1</div>
  <div class="item second">2</div>
</div>

我想了解为什么在第二个框上设置align-items: center会使第一个框向下推。

免责声明：我知道如何解决这个问题，我只是想获得一个解释，就像一个假人一样，为什么会这样表现，因为我很难理解这种行为。