CSS Tip

Animate to height/width auto (without hacks)

Only three lines of code and you have a smooth transition to height: auto

& {
  interpolate-size: allow-keywords;
}
p {
  transition: 1s;
}
p:not(:hover) {
  height: 5lh;
}

The interpolate-size: allow-keywords is doing all the magic. Read Animate to height: auto; (and other intrinsic sizing keywords) in CSS for more detail.

Try the below using the lastest version of chrome:

See the Pen Animating to height: auto by Temani Afif (@t_afif) on CodePen.

More CSS Tips