Overflow

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

• Basic Usage
• Quick Reference
• How It Works
• Responsive Overflow
• Related Documentation

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.

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

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.

// 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 — flex-col and flex-row layout direction
• Axis Sizes — controlling main-axis size
• WFlexContainer — the widget that applies overflow behavior