Skip to content

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

ClassDescription
*XY
ovov:xov:yauto
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...

Released under the MIT License