div里子元素高度自适应

要使 div 元素的子元素高度自适应，可以使用 CSS 的 flexbox 或 grid 布局来实现。以下是两种常见的方法：

1. 使用 flexbox 布局：

<div style="display: flex; flex-direction: column;">
  <div style="flex: 1;">子元素1</div>
  <div style="flex: 1;">子元素2</div>
  <div style="flex: 1;">子元素3</div>
</div>

在上述代码中，父元素使用 `display: flex;` 属性来启用 flexbox 布局，并设置 `flex-direction: column;` 使子元素垂直排列。子元素使用 `flex: 1;` 属性来平分父元素的垂直空间，从而实现高度自适应。

2. 使用 grid 布局：

<div style="display: grid; grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

在上述代码中，父元素使用 `display: grid;` 属性来启用 grid 布局，并设置 `grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));` 来自动填充行，并设置每行的最小高度为 100px。子元素的高度将根据父元素的高度自适应。

这两种方法都可以实现子元素的高度自适应，你可以根据实际需求选择其中一种来使用。