# ScrollArea

Native scrolling with inset overlay scrollbars that preserve content width.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, ScrollArea, Stack, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ScrollArea aria-label="Recent activity" style={{ maxHeight: "12rem" }}>
        <Stack gap="4">
          <Text>Project created.</Text>
          <Text>Workspace updated.</Text>
        </Stack>
      </ScrollArea>
    </FloodRoot>
  );
}
```

## Design notes

- Scrollbars overlay the viewport with an inset; they do not reserve a content gutter. Give the viewport an explicit height or maxHeight to produce vertical overflow.
- The forwarded ref, className, style and native div props belong to the scrollable viewport. Supply a visible context or accessible label for keyboard users.
- Wheel, touch and keyboard scrolling remain native. Default contentInset="scrollbar" keeps text and full-width rows clear of rails with inner padding, without shrinking the viewport. Explicit none allows edge-to-edge content when the host already provides safe padding. Rails automatically avoid rounded clipping corners.
- Forced colors restores native scrollbars as an accessibility fallback. Verify horizontal and RTL content, resizing and zoom in the host composition.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `orientation` | `"vertical" \| "horizontal" \| "both"` | `"vertical"` |
| `contentInset` | `"none" \| "scrollbar"` | `"scrollbar"` |
| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |