平滑拉伸 div

let container = document.getElementById('container');
updateHeight(container);  // изначальная установка высоты в пикселях
let count = 5,
    interval = setInterval(() => {  // добавление 5 блоков с интервалом 1с
      if (!count) {
        clearInterval(interval);
        return;
      }
      container.insertAdjacentHTML('beforeend', '<div class="content-block"></div>');
      updateHeight(container);     // добавили контент - изменим высоту контейнера
      count--;
    }, 1000);

// считает высоту элемента по принципу "scrollHeight минус паддинги"
function updateHeight(el) {
  let cs = getComputedStyle(el),
      paddings = (parseInt(cs.getPropertyValue('padding-top'))    || 0) + 
                 (parseInt(cs.getPropertyValue('padding-bottom')) || 0);
  el.style.height = (el.scrollHeight - paddings) + 'px';
}

#container {
  border : 1px dashed red;
  padding: 8px;
  text-align: center;
  font: 16px sans-serif;
  color: red;
  overflow-y: hidden;  /* обязательно */
  transition: height 0.2s linear;
}

.content-block {
  height: 1em;  /* явно указывать высоту потомков не обязательно, здесь это делается только потому что div'ы добавляются пустыми (мне лень копипастить lorem ipsum) */
  margin: 8px;
  background: #77d;
}

<div id="container">Контейнер</div>