Как правильно сделать нарастающий блок не зная высоты?

Question

[Сашка Брамс]

Есть блок, он свернут, тоесть высота 0
По клику нужно чтобы он начал расти и вырос до максимума (относительно контента внутра)
его высоту я не знаю.

Вот пример, только тут высоту я знаю, нужно с неопределенной высотой:
https://jsfiddle.net/nt3Lvkjx/1/

Не подскажете как это реализовать?

Использую только нативный js

Answer 1

[trushka]

https://jsfiddle.net/trushka/cdz27dev/

Answer 2

[Николай]

Если планируется, что блок должен растягиваться внутренним контентом - то можно использовать свойство max-height.

// устанавливаем значение больше, чем максимальное возможное значение
max-height: 500px;
transition max-height 1s;

Answer 3

[Денис]

Такой вариант

var div = document.querySelector('div');

document.querySelector('button').addEventListener('click', function() {
  var cl = div.cloneNode(true);  
  cl.style.cssText = 'height: auto; position: absolute; left: -100500px;';
  document.body.appendChild(cl);
  div.style.height = cl.offsetHeight + 'px';
  cl.parentNode.removeChild(cl);
  
}, false);

Answer 4

[Алексей Николаев]

Сперва получаете высоту контента внутри в пикселах (при каждом клике), а далее, с известной высотой, раздвигаете блок. Самое простое, что в голову пришло