overflow-y
Controls only vertical overflow. The most commonly used overflow direction for scrollable content areas such as sidebars, modals, and chat windows.
Class List
| Class | CSS | Description |
|---|---|---|
oyv | overflow-y: visible | default; overflowing content is visible as-is |
oyh | overflow-y: hidden | clips and hides overflowing content |
oys | overflow-y: scroll | always shows vertical scrollbar |
oya | overflow-y: auto | shows vertical scrollbar only when overflowing |
oyc | overflow-y: clip | clips content without creating a scroll area |
Visual Comparison
Compares the behavior of each value in a height-restricted container.
Hidden — oyh
First line
Second line
Third line
Fourth line
Fifth line
Sixth line
Seventh line
Eighth line
overflowing portion is clipped and hidden
Auto — oya
First line
Second line
Third line
Fourth line
Fifth line
Sixth line
Seventh line
Eighth line
vertical scrollbar appears only when overflowing
Scroll — oys
First line
Second line
Third line
Fourth line
Fifth line
Sixth line
Seventh line
Eighth line
vertical scrollbar is always displayed
Clip — oyc
First line
Second line
Third line
Fourth line
Fifth line
Sixth line
Seventh line
Eighth line
clips content; programmatic scrolling also blocked
Usage Examples
<!-- Scrollable sidebar -->
<aside class="oya h100vh ps t0 l0 w25rem p2rem">
<nav>Long menu list...</nav>
</aside>
<!-- Fixed height chat area -->
<div class="oya maxh40rem p16px bg18181B br8px">
<div>Message 1</div>
<div>Message 2</div>
<!-- ... Many messages -->
</div>
<!-- Modal body scroll -->
<div class="oya maxh60vh p2rem">
Long modal content...
</div>Tips
oya vs oys
oya shows a scrollbar only when content overflows, while oys always shows it. In most cases oya is appropriate.