flex布局高度自适应

在Flex布局中，可以使用`flex-grow`属性来实现子元素的高度自适应。`flex-grow`属性指定了元素在父容器中分配剩余空间的比例。

具体实现步骤如下：

1. 将父容器的`display`属性设置为`flex`，这样父容器就变成了一个Flex容器。
2. 设置子元素的`flex-grow`属性为一个大于0的值，表示子元素可以占据剩余空间。
3. 设置子元素的`height`属性为`100%`，这样子元素的高度就会自动适应父容器的高度。

以下是一个示例代码：

<style>
  .container {
    display: flex;
    height: 200px;
  }

  .item {
    flex-grow: 1;
    height: 100%;
    border: 1px solid black;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在上面的示例中，`.container`是父容器，`.item`是子元素。通过设置`.item`的`flex-grow: 1;`，子元素的高度会自动适应父容器的高度。