如何将子<div>置于父<div>上方并实现容器自适应高度？

已知可以用flexbox或grid替代position:absolute实现这类自适应布局，但不清楚当前场景下的具体应用方式，尝试过让父容器根据上方子容器动态调整尺寸但未成功，求具体实现思路。

Flexbox 实现方案 #

将三个容器的父元素设置为弹性容器，利用flex的自动对齐特性实现尺寸跟随：

代码示例 #

<div class="parent">
  <div class="container-2">容器2内容</div>
  <div class="container-1">容器1内容<br>新增多行内容<br>测试高度自适应</div>
  <div class="container-3">容器3内容</div>
</div>

.parent {
  display: flex;
  /* 若需纵向布局，添加 flex-direction: column; */
}

.container-1 {
  flex: 1; /* 让容器1占据剩余空间，宽度/高度自适应 */
  padding: 10px;
  background: #eee;
}

.container-2, .container-3 {
  width: 200px; /* 可根据需求设置固定尺寸，或用flex分配空间 */
  padding: 10px;
  background: #ccc;
}

原理：flex容器默认align-items: stretch，所有子容器高度会自动撑满父容器，而父容器的高度由内容最高的子容器（容器1）决定，因此容器2和3的高度会跟随容器1变化。若为纵向布局，flex:1会让容器1占据剩余高度，容器2和3高度自适应匹配。

Grid 实现方案 #

用CSS Grid更直观地定义布局规则，实现容器间尺寸联动：

代码示例 #

<div class="parent">
  <div class="container-2">容器2内容</div>
  <div class="container-1">容器1内容<br>新增多行内容<br>测试高度自适应</div>
  <div class="container-3">容器3内容</div>
</div>

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 三列：容器2、3固定宽度，容器1自适应 */
  /* 若需纵向布局，用 grid-template-rows: auto 1fr auto; */
  gap: 10px; /* 可选：设置容器间距 */
}

.container-1 {
  padding: 10px;
  background: #eee;
}

.container-2, .container-3 {
  padding: 10px;
  background: #ccc;
}

原理：Grid布局中，同一行的所有列高度默认统一，1fr让容器1占据剩余空间，容器2和3会自动匹配容器1的高度；若为纵向布局，1fr分配给容器1，容器2和3高度会随容器1变化。

内容的提问来源于stack exchange，提问作者zaturn tarto