Overflow
Use overflow utilities to control how content behaves when it exceeds the bounds of its container. In Flutter, the clip-family classes map to ClipRect/ClipRRect, while the scroll-family classes wrap content in a SingleChildScrollView.
overflow-visible
Section titled “overflow-visible”Allow content to render outside the container boundary.
Style('overflow-visible ...', children: [ // ...])overflow-hidden
Section titled “overflow-hidden”Clip content at the container boundary.
Style('overflow-hidden ...', children: [ // ...])overflow-auto
Section titled “overflow-auto”Add a scrollbar only when content overflows.
Style('overflow-auto ...', children: [ // ...])overflow-x-auto
Section titled “overflow-x-auto”Scroll horizontally only when content overflows the width.
Style('overflow-x-auto ...', children: [ // ...])overflow-y-auto
Section titled “overflow-y-auto”Scroll vertically only when content overflows the height.
Style('overflow-y-auto ...', children: [ // ...])overflow-x-scroll
Section titled “overflow-x-scroll”Always show a horizontal scrollbar.
Style('overflow-x-scroll ...', children: [ // ...])overflow-y-scroll
Section titled “overflow-y-scroll”Always show a vertical scrollbar.
Style('overflow-y-scroll ...', children: [ // ...])overflow-scroll
Section titled “overflow-scroll”Always show scrollbars on both axes.
Style('overflow-scroll ...', children: [ // ...])Class reference
Section titled “Class reference”| Class | Flutter equivalent | Description |
|---|---|---|
overflow-hidden | ClipRect / ClipRRect | Clip content on both axes |
overflow-clip | ClipRect / ClipRRect | Clip content (same as hidden) |
overflow-visible | no clip | Allow content to paint outside bounds |
overflow-auto | SingleChildScrollView (both) | Scroll on both axes when needed |
overflow-scroll | SingleChildScrollView (both) + Scrollbar(thumbVisibility: true) | Always-visible scrollbars on both axes |
overflow-x-auto | SingleChildScrollView(horizontal) | Horizontal scroll when needed |
overflow-x-scroll | SingleChildScrollView(horizontal) + Scrollbar(thumbVisibility: true) | Always-visible horizontal scrollbar |
overflow-x-hidden | ClipRect / ClipRRect | Clip horizontal overflow |
overflow-x-visible | no clip | Allow horizontal overflow |
overflow-y-auto | SingleChildScrollView(vertical) | Vertical scroll when needed |
overflow-y-scroll | SingleChildScrollView(vertical) + Scrollbar(thumbVisibility: true) | Always-visible vertical scrollbar |
overflow-y-hidden | ClipRect / ClipRRect | Clip vertical overflow |
overflow-y-visible | no clip | Allow vertical overflow |