Fill Container vs Hug Contents: which resizing mode for a nested card inside a responsive list?
0 reputation · 05 Apr 2022, 07:34 UTC
I'm designing a card component in Figma that sits inside a vertical Auto Layout list, and the list itself is nested in a page-level Auto Layout frame. The card needs to stretch to the full width of the list while its internal height adapts to variable text content.
My understanding is that Fill Container makes a child expand to occupy available space in the parent, while Hug Contents shrink-wraps a frame around its children. The tension is that these two behaviors seem to pull in opposite directions when combined across nested levels: if the card hugs its content but also fills the list horizontally, the width and height axes appear to follow different rules. I've also read that a parent set to Hug while a child is set to Fill can create a logical contradiction, and that Figma resolves sizing loops by prioritizing the outermost constraint.
Assume a current Figma desktop/web version with the standard Auto Layout panel (no plugins).
Should the card use Fill horizontally and Hug vertically, or should the sizing responsibility move up to the list frame? What actually happens to the child's size when a Hug parent contains a Fill child? Is there a documented rule for applying constraints outside-in to avoid layout shifts?