Overflow
The overflow utility classes help manage the behavior of content that overflows its container. These classes allow you to control how overflowing content is handled on both the x and y axes.
CSS Classes
| Class | Description | ||
|---|---|---|---|
| * | X | Y | |
ov | ov:x | ov:y | auto |
ov:h | ov:x:h / ov:h:x | ov:y:h / ov:h:y | hidden |
ov:s | ov:x:s / ov:s:x | ov:y:s / ov:s:y | scroll |
ov:v | ov:x:v / ov:v:x | ov:y:v / ov:v:y | visible |
overflow: auto
The ov class sets the overflow property to auto, allowing the content to be scrolled if necessary.
html
<div class="ov">
<div>Content that overflows...</div>
</div>Content that overflows...
overflow: hidden
The ov:h class sets the overflow property to hidden, clipping the overflowing content.
html
<div class="ov:h">
<div>Content that overflows...</div>
</div>Content that overflows...
overflow: scroll
The ov:s class sets the overflow property to scroll, adding scrollbars regardless of whether the content overflows.
html
<div class="ov:s">
<div>Content that overflows...</div>
</div>Content that overflows...
overflow: visible
The ov:v class sets the overflow property to visible, allowing the content to overflow the container.
html
<div class="ov:v">
<div>Content that overflows...</div>
</div>Content that overflows...
X / Y Overflow
X
overflow-x: auto
The ov:x class sets the overflow-x property to auto.
html
<div class="ov:x">
<div>Content that overflows horizontally...</div>
</div>Content that overflows...
overflow-x: hidden
The ov:x:h / ov:h:x class sets the overflow-x property to hidden.
html
<div class="ov:x:h">
<div>Content that overflows horizontally...</div>
</div>Content that overflows...
overflow-x: scroll
The ov:x:s / ov:s:x class sets the overflow-x property to scroll.
html
<div class="ov:x:s">
<div>Content that overflows horizontally...</div>
</div>Content that overflows...
overflow-x: visible
The ov:x:v / ov:v:x class sets the overflow-x property to visible.
html
<div class="ov:x:v">
<div>Content that overflows horizontally...</div>
</div>Content that overflows...
Y
overflow-y: auto
The ov:y class sets the overflow-y property to auto.
html
<div class="ov:y">
<div>Content that overflows vertically...</div>
</div>Content that overflows...
overflow-y: hidden
The ov:y:h / ov:h:y class sets the overflow-y property to hidden.
html
<div class="ov:y:h">
<div>Content that overflows vertically...</div>
</div>Content that overflows...
overflow-y: scroll
The ov:y:s / ov:s:y class sets the overflow-y property to scroll.
html
<div class="ov:y:s">
<div>Content that overflows vertically...</div>
</div>Content that overflows...
overflow-y: visible
The ov:y:v / ov:v:y class sets the overflow-y property to visible.
html
<div class="ov:y:v">
<div>Content that overflows vertically...</div>
</div>Content that overflows...