Overcoming CSS Not Calculating Auto-Height For Transitions

This article was updated 7 Nov 2021 for more modern JS and some terminology changes.

Over the past decade the improvements to CSS have transformed how websites are built, mostly for the better. One of the most powerful of these has been the CSS transition, allowing us to make animations without the slew of JavaScript we threw at sites in the past.

Yet frustratingly the one transition that’s hard to do is between “0” and “Auto” values. The automatic size calculation — sizing to the content — simply isn’t something browser makers seem to be willing to even consider implementing.

This makes show/hide animations of all sorts a lot harder than need be. I’ve seen all sorts of crazy convoluted answers to this. Some people try to use fixed heights which requires the content and screen size to be static, an utterly impractical solution. Others intercept the trigger of the animation or create one using JavaScript, and then try to calculate the values on the fly. In many cases, the folks with the scripting answers ignore how page resizing can screw up the layout, or layer hook upon hook to try and compensate for it. They even go so far in some cases as to revert to the old JavaScript way of animating things.