Profile card with nested Auto Layout sizing

WHAT THIS TESTS Whether you can reason about Auto Layout's direction and the three resizing behaviors, fixed, hug, and fill, well enough to make a container that is rigid in one axis and elastic in the other.

A GOOD ANSWER COVERS The outer container is a vertical Auto Layout frame holding the rows stacked top to bottom. Set its horizontal resizing to a fixed width so the card never changes width, and its vertical resizing to hug contents so its height is driven by whatever it contains. Inside, a horizontal Auto Layout frame holds the avatar and the name side by side, with the avatar fixed and the name able to fill or hug as needed. The bio is a text layer placed in the vertical stack with its horizontal resizing set to fill container, so it spans the fixed card width, and its height left to auto so it grows as text wraps to more lines. Because the bio's height increases and the parent hugs, the whole card expands downward while its width stays locked. Consistent padding and item spacing on the Auto Layout frames keep the spacing clean as content changes.

COMMON WRONG ANSWERS Giving the card or bio a fixed height, which clips long text. Setting the bio to hug width instead of fill, so it does not wrap to the card width. Making the outer frame hug width too, letting the card widen with content. Forgetting that resizing is per-axis.

LIKELY FOLLOW-UPS What is the difference between hug, fill, and fixed on each axis? How would you cap the bio at a max height with truncation? How does this map to CSS flexbox? How do you handle a very long name?

ONE CONCRETE EXAMPLE You create a vertical frame, set width fixed to 320 and height to hug. Inside, a horizontal frame holds a 48px avatar and a name set to fill the remaining width. Below it sits the bio text with fill-container width and auto height. Typing a three-line bio makes the text layer grow to three lines tall, the hugging parent absorbs that height, and the card stretches downward while staying exactly 320 wide, mirroring a flex column with a fixed-width, auto-height box.