Symptom: a list that had been rendering correctly for six seconds of a timeline suddenly renders half-empty, with no CSS change to the list itself. The only change was adding new rows BELOW it inside the same panel.
Setup: an animated card panel with a fixed, GSAP-animated height and overflow: hidden, whose inner wrapper is display: flex; flex-direction: column. Rows are revealed progressively while the panel height grows in steps.
Cause: flex items default to flex-shrink: 1. Once the sum of the children's natural heights exceeds the panel's animated height, flexbox shrinks the children proportionally. overflow: hidden on a child lets it shrink below its content height without visibly overflowing, so the row silently clips instead of spilling. The rows that break are the EARLIER ones that were already on screen and correct - the newly added rows at the bottom look fine, which sends you debugging the wrong element.
Fix: flex: none on every direct child of the animated panel. Then the children keep their natural heights and the panel's own overflow: hidden does the clipping you actually intended.
Related sizing rule: when late content arrives, measure the new target height (rows + margins + the panel's own padding) rather than guessing a round number; a 215px guess against 212px of content leaves no slack and the last row clips on subpixel rounding.