This is my minimal reproduction (only works in Chromium browsers due to calc-size):
.parent { display: flex; align-items: start;}.item { display: flex; flex-direction: column; background: orange;}p { box-sizing: border-box; overflow: hidden;}.long { width: 100%; opacity: 0; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; transition: width 3s, opacity 3s;}.item:hover .long { height: 1.5rem; width: calc-size(auto, size); opacity: 1;}<div class="parent"><div class="item"><p>Good test.</p><p class="long collapsed">Yappity yap yap yap.</p></div></div>I recently switched from width: 0 to width: 100% for the long paragraph to try to make the animation smoother (no animating from the absolute start), but it isn't working as intended. It's making the container wider when it's in the collapsed form (although oddly it works fine while animating).
So what can I do? How do I either make width: 100% not affect the width of the parent or otherwise use the available width in the collapsed state for the starting width in the animation instead of 0?