Плавно растянуть 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>