overflow-x
Controls only horizontal overflow. Commonly used for horizontally scrollable containers such as carousels and wide tables.
Class List
| Class | CSS | Description |
|---|---|---|
oxv | overflow-x: visible | default; overflowing content is visible as-is |
oxh | overflow-x: hidden | clips and hides overflowing content |
oxs | overflow-x: scroll | always shows horizontal scrollbar |
oxa | overflow-x: auto | shows horizontal scrollbar only when overflowing |
oxc | overflow-x: clip | clips content without creating a scroll area |
Visual Comparison
Compares the behavior of each value when wide content exceeds the container.
Visible — oxv
이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.
content overflows outside the container
Hidden — oxh
이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.
overflowing portion is clipped and hidden
Auto — oxa
이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.
horizontal scrollbar appears only when overflowing
Scroll — oxs
이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.
horizontal scrollbar is always displayed
Usage Examples
<!-- Horizontally scrollable table -->
<div class="oxa">
<table class="minw60rem">
<tr><td>Wide table content...</td></tr>
</table>
</div>
<!-- Horizontal scroll card carousel -->
<div class="oxa df gap16px pb12px">
<div class="minw28rem bg18181B p2rem br8px fs0">Card 1</div>
<div class="minw28rem bg18181B p2rem br8px fs0">Card 2</div>
<div class="minw28rem bg18181B p2rem br8px fs0">Card 3</div>
</div>
<!-- Overflow prevention (code block) -->
<div class="oxh maxw100p">
<pre>A very long line of code...</pre>
</div>