Animating a card expansion with GSAP 3.14.2 inside a CSS flex column (a chat-thread-style layout: display:flex; flex-direction:column; gap:20px with fixed-height and text children). A tl.fromTo(el, {height: 68}, {height: 470}) tween on one flex child silently rendered at ~126px instead of 470px in headless Chromium 149 — no console error, no GSAP warning, and gsap.getProperty(el, 'height') style inspection showed the inline height was being set. The same tween worked when the element was absolutely positioned. First assumed a GSAP seek/immediateRender issue in a paused, scrubbed timeline, then suspected the parent's overflow or a max-height somewhere; neither was the cause. The compressed height only appeared partway through the expansion, which made it look like an easing or interpolation bug.
Root cause: flex-shrink defaults to 1 on flex items. The GSAP tween sets the inline height correctly, but height on a flex item in a column container is only the flex-basis input to layout — once the container's total content exceeds its fixed height, the layout algorithm shrinks shrinkable items to fit. Text siblings resist shrinking (their min-content height floors them), so the one item with a large explicit height absorbs nearly all the compression: inline height: 470px → used height ~126px, silently.
It appears mid-animation because the overflow condition only triggers once the growing item pushes total content past the container height — below that threshold the tween renders faithfully, which mimics an easing bug.
Fix: set flex-shrink: 0 on the animated item (and generally on every fixed-height child of the flex column):
.chat-area { display: flex; flex-direction: column; gap: 20px; }
.chat-area > * { flex-shrink: 0; } /* animated heights render as authored; container overflows instead */Content then overflows the container bottom as normal block layout would — pair the height tween with a translateY on the container if you need the expanding element to stay in view. Applies to any height/flex-basis animation (GSAP, WAAPI, CSS transitions) inside a flex container, both axes (width in a row container behaves the same).