# No Excessive Scrollbars

**MUST** · **ID:** `layout-no-excessive-scrollbars` · **Category:** layout
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-no-excessive-scrollbars

> MUST: Avoid unwanted scrollbars; fix overflows

Only render useful scrollbars; fix overflow issues

Unexpected scrollbars indicate layout problems. Fix the root cause (usually overflow issues) rather than hiding scrollbars with CSS. On macOS, set "Show scroll bars" to "Always" during development to catch these issues.

## Bad — do not do this

`layout-no-excessive-scrollbars-bad`

```tsx
export function NoExcessiveScrollbarsBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4 overflow-auto" style={{ maxHeight: '200px' }}>
        <h3 className="text-lg font-semibold mb-2" style={{ width: '350px' }}>
          This is a very long title that extends beyond the container
        </h3>
        <p className="text-sm text-muted-foreground">
          Content with proper width that doesn't cause issues.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Unwanted horizontal scrollbar from overflow
      </p>
    </div>
  );
}
```

## Good — do this

`layout-no-excessive-scrollbars-good`

```tsx
export function NoExcessiveScrollbarsGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4 overflow-auto" style={{ maxHeight: '200px' }}>
        <h3 className="text-lg font-semibold mb-2 break-words">
          This is a very long title that extends beyond the container
        </h3>
        <p className="text-sm text-muted-foreground">
          Content that wraps properly and respects container bounds.
        </p>
        <p className="text-sm text-muted-foreground mt-2">
          Additional content to demonstrate vertical scrolling when needed.
        </p>
        <p className="text-sm text-muted-foreground mt-2">
          More content here to show how the container handles overflow correctly.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Content wraps properly, only vertical scroll when needed
      </p>
    </div>
  );
}
```

## References

- [CSS Overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow)