Size, Space, and Units

Taffy layout is driven by available space plus size constraints. Understanding this model keeps layouts predictable.

Available Space

The second argument to computeLayout defines the available space:

Allowed Values

• number: absolute size (usually pixels)
• "min-content": minimum content size
• "max-content": maximum content size
• "auto": let layout decide

Box Model

Taffy behaves like box-sizing: border-box:

┌─────────────────────────┐
│  Margin                 │
│  ┌───────────────────┐  │
│  │ Border            │  │
│  │  ┌─────────────┐  │  │
│  │  │ Padding     │  │  │
│  │  │  Content    │  │  │
│  │  └─────────────┘  │  │
│  └───────────────────┘  │
└─────────────────────────┘

• size includes padding + border
• margin is external spacing

Percentages

Percent sizes are relative to the parent content box:

Common Pitfalls

• A root without size often results in 0 width/height for children
• auto inside Flex means content-sized
• max-content triggers measurement callbacks

Next Steps

• Measure Functions
• Styling Guide