I recently ran into an issue where I had to transition the height of an element from 0 to auto. Typically this is needed when "pushing" in new content from a feed, or expanding a container with "Show More". On the comment section of this website, I achieved this by first appending the inserted element to location off-screen and then measuring the rendered height. Then I could animate the expanding container using an absolute height.
I wanted to find a more elegant solution to this problem. I encountered the max-height solution, in which the maximum height is animated instead of the height. This works as long as the content is always less than your max-height. There are a few caveats, most notably the animation getting "stuck" (because the max-height is too high). When animating back to zero, it gets stuck at the beginning for a split second.