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" is a style dimension value; it is not accepted as available space.

Box Model

Styles default to BoxSizing.BorderBox. Set boxSizing to BoxSizing.ContentBox to specify content dimensions instead:

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

• With BoxSizing.BorderBox, style size includes padding and border
• With BoxSizing.ContentBox, padding and border are added to style size
• margin is external spacing

Percentages

Percent sizes resolve against the containing block when that dimension is definite. For ordinary in-flow Flexbox or Block children this is the parent's content box; Grid items use their grid area, and absolute positioning can establish a different containing rectangle.

Common Pitfalls

• Auto-sized nodes depend on their content, available space, and layout constraints
• Flex growth, shrinkage, and alignment can change an auto-sized node's final size
• Content measurement requires computeLayoutWithMeasure(); cached or already-known dimensions can skip the callback

Next Steps

• Measure Functions
• Styling Guide