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

Question

我有两个垂直堆叠的div。单击按钮时，我试图将下div延伸到上div的顶部。当底部div使用绝对定位，top并根据需要更新较低div 的属性时，此方法效果很好。

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

使用绝对定位的示例

Answer 1

对于这种情况，您应该避免使用position: absoluteas 使元素停止相互影响。相反，我建议您对这两个元素使用Flexbox组合宽度 min-width 和 max-width。如果您的组件始终具有固定高度（示例中为 300px），则可能会发生内容溢出容器的情况。我更多的设计背景会有帮助，所以希望这个解决方案对你有用。

document.querySelector('.toggle').addEventListener('click', function() {
  document.querySelector('.wrapper').classList.toggle('expanded');
});

body {
  margin: 10rem;
}

div {
  width: 12rem;
}

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  height: 300px;
  position: relative;
}

.stationary {
  min-height: 50%;
  max-height: 100%;
  transition: min-height 1s, max-height 1s;
  background: red;
  overflow: auto;
}
.expanded .stationary {
  max-height: 0;
  min-height: 0%;
}

.expanding {
  flex: auto;
  bottom: 0;
  height: 100%;
  max-height: auto;
  background: blue;
  transition: max-height 1s;
}

.expanded .expanding {
  max-height: 100%;
  transition: max-height 1s;
}

<button class="toggle">Toggle</button>
<div class="wrapper">
  <div class="stationary">
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
  </div>
  <div class="expanding">
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
  </div>
</div>