{"id":252477,"date":"2017-03-10T06:47:39","date_gmt":"2017-03-10T13:47:39","guid":{"rendered":"http:\/\/css-tricks.com\/?p=252477"},"modified":"2021-04-03T13:47:00","modified_gmt":"2021-04-03T20:47:00","slug":"using-css-transitions-auto-dimensions","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-css-transitions-auto-dimensions\/","title":{"rendered":"Using CSS Transitions on Auto Dimensions"},"content":{"rendered":"\n
We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out<\/code>. You’ve created a
collapsed<\/code> CSS class that applies
height: 0<\/code>. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if
transition<\/code> had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as
auto<\/code>. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content.<\/p>\n\n\n\n\n\n\n\n