"Absolutely-positioned flex column with auto height silently drops trailing children"
▸ SYMPTOM
In a tall absolutely-positioned flex column with many rows, trailing children silently don't render at all — no overflow paint, no compression, just missing UI. The card background ends at the last child that "fits" the mis-measured extent, even though the full content demonstrably fits on screen. This is the same engine auto-height measure drift pattern seen with thin rows, scaled up to an entire panel.
▸ CAUSE
Yoga's auto-height measurement on absolutely-positioned flex columns can under-report content height. When the column uses position: absolute (especially combined with transform: scale(...)) and has no explicit height, the layout engine clamps at the measured extent and everything past it is silently clipped — there is no overflow rendering, no flex compression, just gone.
▸ FIX
Give Yoga a definite size with an explicit height value. Size it as painted-space ÷ transform-scale. The unused remainder is harmless under a pointer-events: none root.
The fix ladder (each verified in-engine):
| Approach | Result |
|---|---|
max-height on the column | Flex-compression — children paint but are squished past the shortened background |
| No height constraint (auto) | The silent truncation described above |
min-height | No effect — does not lift the clamp |
Explicit height | Everything lays out and renders correctly |
.panel {
position: absolute;
display: flex;
flex-direction: column;
// Don't: rely on auto height
// Do: explicit height (painted-space / transform-scale)
height: 1400px;
}▸ WHY IT WORKS
Auto-height measurement in Yoga's absolute-position context can under-report, and the engine does not fall back to overflow rendering — the excess content is simply not laid out. An explicit height bypasses the measurement entirely, giving the layout engine a definite constraint to work against. The column then correctly lays out all children within the stated height.