Overflow

Control behavior when content exceeds the container size.

The overflow property configures layout behavior when content is larger than the container's box. Set both axes with { x, y }, or use overflowX and overflowY. Your renderer is responsible for clipping, scrolling, and drawing scrollbars.

Values

Scrollbar Sizing

Overflow.Scroll reserves scrollbarWidth space even when content fits; the default width is 0. Taffy computes scrollbarSize, which you can read from the layout output. Horizontal overflow reserves height, and vertical overflow reserves width.

contentSize, contentWidth, and contentHeight expose reachable content extents measured from the scroll origin. See The Layout Object for their coordinate semantics, including RTL.

const tree = new TaffyTree();
const style = new Style({
  overflow: { x: Overflow.Scroll, y: Overflow.Scroll },
  scrollbarWidth: 15, // Helper to set estimated scrollbar size
});

// After layout computation:
const node = tree.newLeaf(style);
tree.computeLayout(node, { width: 100, height: 100 });
const layout = tree.getLayout(node);
console.log(
  `Scrollbar Size: ${layout.scrollbarWidth} x ${layout.scrollbarHeight}`,
);

Example

Next Steps

• Core Concepts
• Size