I am trying to change div width with a transition (transition: width 0.4s) so I get a smoothly expanding/collapsing div as its content changes. I cannot use width: 100% because that breaks the transition effect. The transition effect seems to only work when both original and new width value is in absolute (px, em, etc.) terms. So I’m having to manually do the work of width: 100% in javascript.

When content increases in length, I can do this simply by setting width to scrollWidth. Works perfectly – it smoothly transitions from the old width to the new larger width. However, when content shortens in length, this doesn’t work, as scrollWidth is equal to width rather than being smaller and fitting only the contents. So, I need an alternative solution. How can I tell how many pixels the contents requires to be fully shown if it’s smaller than the current width of its parent div? Any attempt to use 100% to let the browser compute it results in breaking the transition effect.