Overflow
Make content scrollable when it exceeds the available space using the overflow-scroll utility class.
On this page
flex/scrollable_overflow
The live demo is not available for this example.
scrollable_overflow.dart
View source
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#
| 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.
// 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-colandflex-rowlayout direction - Axis Sizes — controlling main-axis size
- WFlexContainer — the widget that applies overflow behavior