Transitioning 'height: auto;'

Animating the height of an element using transition doesn’t work when the element is transitioning to or from the value auto. Instead you can often achieve the desired effect by animating max-height to a target value that you know will cover your desired range.

.menu {
  min-height: 50px;
  max-height: 50px;
  transition: max-height 0.3s;
}
 
.menu.open {
  max-height: 400px;
}