当 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

对齐项目：居中；在框中 class

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

item2 没有将全高作为 item1，因为 item1

中有 margin:auto

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

Why can't I adjust the height of flex items using "align-items: stretch" when the flex container is a scroll box?

css

overflow

flexbox