Animating max-height to overcome height:auto limitation

by dmitri14

HTML

<div>
  Hover over me<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
</div>

CSS

div {
    max-height:1.2em;
    background:slategray;
    color:white;
    
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

div:hover {
    max-height:999px;
}