Transitions an element’s height from 0 to auto when its height is unknown.

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</div>
</div>

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')

Explanation

1. transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.
2. overflow: hidden prevents the contents of the hidden element from overflowing its container.
3. max-height: 0 specifies that the element has no height initially.
4. .target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.

1. el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.
2. el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.

Browser Support

• https://caniuse.com/#feat=css-variables
• https://caniuse.com/#feat=css-transitions