| But it's clearly the feature that people want and expect to be there. This is the most upvoted issue on CSS WG Github[0] and the StackOverflow question how to do it in CSS has 3 pages of answers (spoiler-alert: there is no nice way to do it only with CSS). > The browser doesn't know what the auto size is any more than you do until it performs a layout (reflow). Layouts are expensive and must be minimized. And what if content is changed in the middle of the transition? Should it recalculate the new auto size? Maybe we will get it some day, but there are good reasons to be cautious. Unfortunately these are good questions to answer and probably the reason browsers don't have it yet. Last time I had to animate `width:auto` and `height:auto` I came up with quite a clever idea. I wrote `width: var(--width-from-js, auto)` and `height: var(--height-from-js, auto)` (CSS Variables (called CSS Custom Property[2]) with a fallback to `auto` when the variable is not defined) and later in JS I calculated the real width and height (using `getComputedStyle` or `getBoundingClientRect`) and just set `--width-from-js` and `--height-from-js` as inline style on the element. I also added event handler for the event that could change the size of this element (like browser window resize) and rerun this code to set updated CSS Property valaues. This way the changes required in JS were minimal, most of the things was in CSS. As a plus when one day browser would support animation to `auto` I would only have to delete the JS code. I need to write about this technique on this 3-pages stackoverflow question one day ;) Interesting observation was that when there was an animation in progress and the code for calculating the width of the element had run (because I resized the browser window) then the animation would just stop. I wouldn't mind if this was also the behavior if browsers would someday support animation of `width/height: auto` natively. [0]https://github.com/w3c/csswg-drafts/issues/626
[1]https://stackoverflow.com/questions/3508605/how-can-i-transi...
[2]https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c... |