Animating max-height to overcome height:auto limitation

by bitstarr

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: lightgrey;
    overflow: hidden;
    
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

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