flex 嵌套flex 高度

在Flex布局中，如果需要嵌套Flex容器，可以将内部的Flex容器设置为`flex: 1`，这样它会占据外部Flex容器的所有剩余空间。同时，也可以在外部Flex容器中设置`align-items: stretch`，这样它的子项就会在交叉轴上拉伸填充整个容器的高度。

例如，以下代码演示了一个内部Flex容器嵌套在外部Flex容器中，内部Flex容器中有三个子项，并且它们的高度会根据外部Flex容器的高度自动调整：

<div class="outer-container">
  <div class="inner-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

.outer-container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.inner-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
}

.item {
  height: 100px;
}

在上面的例子中，外部Flex容器的高度为500px，内部Flex容器会占据所有剩余空间，即高度为400px。每个子项的高度为100px，所以它们会在内部Flex容器中平均分配高度，填充整个容器。