Как сделать без grid подобное?

Есть код

.block {
  display: grid;
  border: 3px solid rgb(17, 48, 221);
  width: 400px;
  height: auto;
}

.block_a {
  grid-area: 1 / 1;
  background-color: rgb(39, 39, 39, 0.8);
  width: 100%;
  height: 370px;
}

.block_b {
  grid-area: 1 / 1;
  background-color: rgba(173, 15, 15, 0.8);
  width: 100%;
  height: 500px;
}

<div class="block">

  <div class="block_a">
    123456789
  </div>

  <div class="block_b">
    absdef
  </div>

</div>

https://stackblitz.com/edit/stackblitz-starters-geoku4?file=styles.css

Данный код умеет делать так. Потомки занимают место оба от левого верхнего угла родителя, и по ширине растягиваются на всю ширину родителя. Если взять любого из потомков и менять его высоту то высота радетеля меняется под высоту потомка. Как реализовать такое без grid? условно говоря старыми методами? Используя float: left; как только ставим width: 100%; 2 блок скачет вниз, или в итоге не получается что при изменении высоты дочерних блоков меняется высота родителя. Может кто подскажет еще какие-то варианты.