12 Feb /Animating height with only CSS

CSS transitions allows smooth animation of containers using max-height. Using height will not work.

Example:

.container{ 
  margin: 1%;
  width: 70%; 
  
  &:hover{
    .content{
      max-height: 300px;
    } 
  }
}

.content{
  transition: max-height 1s ease;
  overflow: hidden;
  max-height: 0;
}