Overflow

Control behavior when content exceeds the container size.

The overflow property specifies what happens if content is larger than the container's box.

Values

Scrollbar Sizing

In Taffy, Overflow.Scroll is often used to signal that a node can scroll. Taffy computes scrollbarSize which you can read from the layout output.

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