Растянуть div на вершину другого div переменной высоты без использования абсолютного позиционирования

Question

У меня есть два div, сложенных вертикально.Я пытаюсь растянуть нижний блок до верха верхнего блока при нажатии кнопки.Это хорошо работает, когда нижний блок использует абсолютное позиционирование, обновляя свойство top нижнего блока по мере необходимости.

Проблема возникает, когда верхний блок имеет переменную высоту.Я бы хотел, чтобы нижний блок сидел внизу верхнего блока, когда он не растянут.Как можно обновить приведенный ниже код, чтобы нижний блок всегда находился ниже верхнего блока, даже если его высота меняется?

Пример использования абсолютного позиционирования

Answer 1

Возможно, один из вариантов - не развернуть blue div, а свернуть красным div. Вот один из способов, как это сделать.

https://codepen.io/anon/pen/yrzBja

Хитрость в том, чтобы сделать фон обертки синим.

Единственная проблема заключается в том, что max-height необходимо установить на произвольное значение (в моем примере 100%), поэтому переход выглядит немного задержанным.

Я надеюсь, что Вы получите от этого вдохновение, чтобы улучшить свое решение.

Answer 2

В этом случае вам следует избегать использования position: absolute, так как заставка элементов stop влияет друг на друга.Вместо этого я рекомендую вам использовать flexbox объединенную ширину min-width и max-width для обоих элементов.Если ваш компонент всегда будет иметь фиксированную высоту (в вашем примере 300 пикселей), то может случиться так, что содержимое переполняет контейнер.Мне бы немного больше помог контекст дизайна, поэтому надеюсь, что это решение подойдет вам.

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>