# Overflow

Make content scrollable when it exceeds the available space using the `overflow-scroll` utility class.

- [Basic Usage](#basic-usage)
- [Quick Reference](#quick-reference)
- [How It Works](#how-it-works)
- [Responsive Overflow](#responsive-overflow)
- [Related Documentation](#related-documentation)

```dart
WFlexContainer(
  className: 'overflow-scroll flex-col bg-gray-100 h-64',
  children: List.generate(
    20,
    (index) => WCard(
      className: 'bg-gray-200 w-full h-10',
      child: WText('Item $index', className: 'text-black'),
    ),
  ),
);
```

## Basic Usage

Apply `overflow-scroll` to a `WFlexContainer` to wrap its content in a `SingleChildScrollView` when
the content height exceeds the container's available space.

```dart
WFlexContainer(
  className: 'overflow-scroll flex-col bg-white h-48',
  children: [
    WCard(className: 'bg-gray-100 w-full h-12', child: WText('Row 1')),
    WCard(className: 'bg-gray-100 w-full h-12', child: WText('Row 2')),
    WCard(className: 'bg-gray-100 w-full h-12', child: WText('Row 3')),
    WCard(className: 'bg-gray-100 w-full h-12', child: WText('Row 4')),
    WCard(className: 'bg-gray-100 w-full h-12', child: WText('Row 5')),
  ],
);
```

## Quick Reference

| Class | Description |
| :--- | :--- |
| `overflow-scroll` | Wraps content in a `SingleChildScrollView` when overflow occurs |

## How It Works

When `overflow-scroll` is present in the `className`, `FlexParser.applyOverflow` wraps the flex
content in a `SingleChildScrollView`. This is applied to `WFlexContainer` only; the scroll direction
follows the flex axis.

## Responsive Overflow

The `overflow-scroll` token supports responsive breakpoint prefixes, allowing overflow behavior to
activate only at certain screen sizes.

```dart
// Scrollable only on small screens; normal layout on medium and above.
WFlexContainer(
  className: 'sm:overflow-scroll md:flex-row flex-col bg-gray-100',
  children: [...],
);
```

## Related Documentation

- [Flex Direction](https://anilcancakir.com/wind_kit/docs/v0.0/flex/flex-direction.md) — `flex-col` and `flex-row` layout direction
- [Axis Sizes](https://anilcancakir.com/wind_kit/docs/v0.0/flex/axis-sizes.md) — controlling main-axis size
- [WFlexContainer](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wflexcontainer.md) — the widget that applies overflow behavior