overflow
Controls how overflowing content is handled in a container. Determines whether to scroll, clip, or display as-is, and also affects border-radius clipping and block formatting context creation.
Class List
| Class | CSS | Description |
|---|---|---|
ov | overflow: visible | default; overflowing content displayed outside container |
oh | overflow: hidden | clips overflowing content; no scrollbars |
os | overflow: scroll | always shows scrollbars; scrollbar persists even without overflow |
oa | overflow: auto | shows scrollbar only when overflowing; most commonly used |
oc | overflow: clip | clips overflowing content; also blocks programmatic scrolling |
Visual Comparison
Compares the difference of each overflow value by placing overflowing text in a fixed-size container (w20rem h10rem).
Visible — ov
default; content overflows outside the container
Hidden — oh
overflowing portion is clipped and hidden; no scrolling
Scroll — os
scrollbar is always displayed
Auto — oa
scrollbar appears only when content overflows
Clip — oc
similar to hidden but also blocks programmatic scrolling
Per-Axis Control — overflow-x / overflow-y
Use dedicated overflow-x and overflow-y classes to control horizontal and vertical axes independently.
| Class | CSS | Description |
|---|---|---|
oxv | overflow-x: visible | horizontal overflow displayed as-is |
oxa | overflow-x: auto | horizontal scroll when overflowing |
oxh | overflow-x: hidden | horizontal overflow clipped |
oxs | overflow-x: scroll | horizontal scrollbar always displayed |
oxc | overflow-x: clip | horizontal overflow clipped (programmatic scrolling also blocked) |
oyv | overflow-y: visible | vertical overflow displayed as-is |
oya | overflow-y: auto | vertical scroll when overflowing |
oyh | overflow-y: hidden | vertical overflow clipped |
oys | overflow-y: scroll | vertical scrollbar always displayed |
oyc | overflow-y: clip | vertical overflow clipped (programmatic scrolling also blocked) |
Class Details
ovoverflow: visible
Default value. Overflowing content is displayed outside the container. Rarely set explicitly, but used to reset other overflow values.
<!-- Default reset (restore child when parent has oh) -->
<div class="oh br8px">
<div class="ov">This child is reset to overflow: visible</div>
</div>ohoverflow: hidden
Clips overflowing content. Cleanly clipped without scrollbars, and creates a new block formatting context (BFC). Commonly used to solve border-radius clipping issues.
<!-- border-radius clipping -->
<div class="oh br8px">
<img src="photo.jpg" class="w100p db" />
<div class="p16px">Image is clipped to rounded corners</div>
</div>
<!-- Text truncation (single line) -->
<p class="oh wsn toe w20rem">
This text is shown in one line and truncated with ... if it overflows
</p>
<!-- Clearfix (creates BFC) -->
<div class="oh">
<div class="fl w50p">Float Left</div>
<div class="fl w50p">Float Right</div>
<!-- oh automatically resolves parent height -->
</div>Common Usage
oh br8px | border-radius clipping — solves child elements breaking through rounded corners |
oh | clearfix — solves parent not capturing floated child height (creates BFC) |
oh wsn toe | text ellipsis — clips single-line text and shows ... |
Caution
oh clips content without scrolling, so users cannot access clipped content. Use oa if scrolling is needed.
osoverflow: scroll
Always shows scrollbars even when content does not overflow. Useful for preventing layout shifts, but oa is more appropriate in most cases.
<!-- Always show scrollbar -->
<div class="os h20rem p16px">
<p>Scrollbar is shown even with little content.</p>
<p>Useful for preventing layout shift.</p>
</div>oaoverflow: auto
Shows scrollbars only when content overflows. The most commonly used overflow value, suitable for sidebars, modal interiors, code blocks, etc.
<!-- Sidebar scroll -->
<aside class="oa h100vh p2rem">
<nav>Long menu list...</nav>
</aside>
<!-- Modal inner scroll -->
<div class="modal pa t50p l50p bg18181B br8px p2rem">
<div class="oa maxh50vh">
<p>Scrollable when long content is added...</p>
</div>
</div>
<!-- Wide table horizontal scroll -->
<div class="oxa w100p">
<table class="w200rem">...</table>
</div>Common Combinations
oa h40rem | fixed-height scroll area (sidebar, panel) |
oa maxh50vh | max-height limited scroll (modal interior) |
oxa | horizontal scroll only (wide tables, code blocks) |
oya | vertical scroll only (lists, chat windows) |
ocoverflow: clip
Similar to oh in clipping overflowing content, but also completely blocks programmatic scrolling. Another difference is that it does not create a BFC.
<!-- Programmatic scroll also blocked -->
<div class="oc w20rem h10rem">
Overflowing content is clipped, and JavaScript scrollTo() does not work.
</div>oh vs oc
oh allows scrolling via JavaScript's scrollTo() and creates a BFC. oc blocks programmatic scrolling and does not create a BFC.
Common Patterns
The oh br8px combination solves the issue of child elements breaking through the parent's border-radius.
<!-- ✅ border-radius clipping Pattern -->
<div class="oh br8px b1pxsolid27272A">
<img src="cover.jpg" class="w100p db" />
<div class="p16px">
Child image does not break through parent rounded corners
</div>
</div>
<!-- ❌ Without oh, child ignores border-radius -->
<div class="br8px b1pxsolid27272A">
<img src="cover.jpg" class="w100p db" />
<div class="p16px">Image breaks through the corners</div>
</div>
<!-- Scrollable sidebar -->
<div class="dg gtc25rem-1fr h100vh">
<aside class="oa py2rem px16px">
<nav>Long menu list</nav>
</aside>
<main class="oa p2rem">Main Content</main>
</div>Tips & Notes
oh clips content
oh clips overflowing content without scrollbars. Since users cannot access clipped content, use oa if scrolling is needed.
oa = scroll only when needed
oa shows scrollbars only when content overflows. Since os always shows scrollbars, oa is more appropriate in most cases.
oh creates a new Block Formatting Context (BFC)
oh creates a BFC, also acting as a clearfix for floated elements. Solves the issue where child floats prevent the parent from capturing height.