Overflow
Utilities for controlling how an element handles content that is too large for the container.
On this page
effects/overflow_basic
The live demo is not available for this example.
overflow_basic.dart
View source
// Basic examples
WDiv(className: 'overflow-hidden')
WDiv(className: 'overflow-scroll')
WDiv(className: 'overflow-x-auto')
Basic Usage#
Use overflow-{mode} to control how content behaves when it exceeds the container's bounds.
Hidden#
Use overflow-hidden to clip any content that extends beyond the container's edges. This applies Clip.hardEdge to the widget.
WDiv(
className: 'overflow-hidden w-20 h-20 bg-white rounded-lg',
child: WDiv(className: 'w-40 h-40 bg-red-500'),
)
Scroll#
Use overflow-scroll to enable scrolling regardless of whether content overflows. This generally wraps the content in a SingleChildScrollView.
WDiv(
className: 'overflow-scroll w-64 h-64 bg-white',
child: LongContentWidget(),
)
Auto#
Use overflow-auto to enable scrolling only when content actually overflows the container bounds.
WDiv(
className: 'overflow-auto max-h-48 bg-gray-100',
child: LongContentWidget(),
)
Visible#
Use overflow-visible to allow content to spill out of the container. This applies Clip.none and prevents the container from introducing a scroll context.
WDiv(
className: 'overflow-visible',
child: LargeContentWidget(),
)
Quick Reference#
| Class | Flutter Equivalent | Description |
|---|---|---|
overflow-auto |
SingleChildScrollView (conditional) |
Scroll only if content overflows |
overflow-hidden |
Clip.hardEdge |
Clip overflowing content |
overflow-visible |
Clip.none |
Content flows outside container |
overflow-scroll |
SingleChildScrollView |
Always enable scrolling |
Variants#
Directional Overflow#
Use overflow-x-{mode} and overflow-y-{mode} to control overflow on a specific axis independently.
effects/overflow_directional
The live demo is not available for this example.
overflow_directional.dart
View source
WDiv(className: 'overflow-x-scroll overflow-y-hidden')
| Class | Description |
|---|---|
overflow-x-auto |
Scroll horizontally if needed |
overflow-y-scroll |
Always scroll vertically |
overflow-x-hidden |
Clip horizontal overflow |
overflow-y-visible |
Allow vertical overflow |
Responsive Design#
Apply different overflow behaviors at different breakpoints using standard modifiers like sm:, md:, lg:, xl:, and 2xl:.
// Scroll on mobile, but show full content on desktop
WDiv(className: 'overflow-scroll md:overflow-visible')
Dark Mode#
Change overflow behavior in dark mode using the dark: prefix.
WDiv(className: 'overflow-visible dark:overflow-hidden')
Arbitrary Values#
The overflow utility does not support arbitrary values. You must use one of the defined keywords (hidden, visible, scroll, auto).
Customizing Theme#
Overflow utilities are hardcoded behavior toggles and cannot be customized via WindThemeData.