当 flex 容器是滚动框时，为什么我不能使用“align-items:stretch”调整 flex 项的高度？

Question

我在这样的滚动框中有两个元素。但是，这里的左元素与右元素不匹配。左边的元素忽略align-items，匹配滚动框的高度。

这是为什么呢，能不能把左边元素的高度和右边的元素相匹配？

我想关于这个问题有一个重复的问题，但现在我还没有找到它。

.box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: stretch; /* not worked. why? */
  overflow: hidden scroll;
  background: green;
}

.item1 {
  background: red; /* doesnt stretch */
}

.item2 {
  width: 200px;
  height: 500px;
  background: red;
  margin: auto;
}

<div class="box">
  <div class="item1">
    <span>sample text</span>
  </div>
  <div class="item2"></div>
</div>

Answer 1

对齐项目：居中；在盒子类中

并根据需要在 item1 和 item2 中给出高度

item2 没有作为 item1 的全高，因为 margin:auto in item1