Javascript 在不使用绝对定位的情况下，将div拉伸到其他可变高度div的顶部

我有两个垂直堆叠的div。我试图在单击按钮时将下分区拉伸到上分区的顶部。当底部div使用绝对定位时，这种方法很有效，可以根据需要更新下部div的

top

属性

当顶部div是可变高度时，就会出现问题。我希望下半身不伸展时坐在上半身的底部。如何更新下面的代码，使底部div始终位于顶部div之下，即使其高度发生变化

---

在这种情况下，您应该避免使用

位置：绝对值

，因为使元素停止相互影响。相反，我建议您对这两个元素使用flexbox组合宽度最小宽度和最大宽度。 如果您的组件总是有固定的高度（在您的示例中为300px），那么可能会发生内容溢出容器的情况。 我想更多的设计背景会对你有所帮助，所以希望这个解决方案对你有用

document.querySelector（'.toggle'）.addEventListener（'click'，function（）{
document.querySelector（'.wrapper'）.classList.toggle（'expanded'）；
});
正文{
保证金：10雷姆；
}
div{
宽度：12雷姆；
}
.包装纸{
显示器：flex；
柔性流动：柱状nowrap；
对齐项目：拉伸；
高度：300px；
位置：相对位置；
}
.固定的{
最小高度：50%；
最大高度：100%；
过渡：最小高度1s，最大高度1s；
背景：红色；
溢出：自动；
}
.扩张的.静止的{
最大高度：0；
最小高度：0%；
}
.扩大{
flex：自动；
底部：0；
身高：100%；
最大高度：自动；
背景：蓝色；
过渡：最大高度1s；
}
.扩大.扩大{
最大高度：100%；
过渡：最大高度1s；
}
切换
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
使其成为可变高度div的随机文本。。。。
可能其中一个选项不是展开
蓝色的
div，而是折叠红色的
div
。
这里有一种方法


诀窍是使包装器的背景为蓝色

唯一的问题是，
max height
需要设置为某个任意值（在我的示例中，
100%
），因此转换看起来有点延迟

我希望您能从中获得一些灵感，进一步改进您的解决方案。
如果您不介意较低的div底部延伸到包装底部（可能调整包装高度？），您可以应用
位置：绝对与
扩展的
类。通过这种方式，它的顶部可以像预期的那样工作，同时仍然能够响应上部div的高度。