0
# Overflow Utilities
1
2
Overflow utilities control how content behaves when it exceeds the boundaries of its container. PrimeFlex provides utilities for controlling overflow behavior on both axes.
3
4
## Capabilities
5
6
### Overflow Control
7
8
Controls the overflow behavior for both horizontal and vertical axes.
9
10
```scss { .api }
11
.overflow-auto { overflow: auto; }
12
.overflow-hidden { overflow: hidden; }
13
.overflow-visible { overflow: visible; }
14
.overflow-scroll { overflow: scroll; }
15
```
16
17
### Horizontal Overflow
18
19
Controls overflow behavior specifically for the horizontal axis.
20
21
```scss { .api }
22
.overflow-x-auto { overflow-x: auto; }
23
.overflow-x-hidden { overflow-x: hidden; }
24
.overflow-x-visible { overflow-x: visible; }
25
.overflow-x-scroll { overflow-x: scroll; }
26
```
27
28
### Vertical Overflow
29
30
Controls overflow behavior specifically for the vertical axis.
31
32
```scss { .api }
33
.overflow-y-auto { overflow-y: auto; }
34
.overflow-y-hidden { overflow-y: hidden; }
35
.overflow-y-visible { overflow-y: visible; }
36
.overflow-y-scroll { overflow-y: scroll; }
37
```
38
39
## Usage Examples
40
41
```html
42
<!-- Scrollable container with auto overflow -->
43
<div class="overflow-auto h-4 w-full">
44
<div class="h-8">Content that exceeds container height</div>
45
</div>
46
47
<!-- Hide overflow for cropped content -->
48
<div class="overflow-hidden">
49
<img src="large-image.jpg" class="w-full" />
50
</div>
51
52
<!-- Horizontal scroll only -->
53
<div class="overflow-x-scroll overflow-y-hidden">
54
<div class="w-screen">Wide content that scrolls horizontally</div>
55
</div>
56
```
57
58
## Responsive Variants
59
60
All overflow utilities support responsive variants:
61
62
- `sm:overflow-hidden` - Hidden overflow on small screens and up
63
- `md:overflow-auto` - Auto overflow on medium screens and up
64
- `lg:overflow-scroll` - Scroll overflow on large screens and up
65
- `xl:overflow-visible` - Visible overflow on extra large screens and up