Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS overflow-x
The CSS overflow-x property controls how content is handled when it overflows the horizontal boundaries of an element. It determines whether to show scrollbars, hide overflow content, or make it visible beyond the container's edges.
Syntax
selector {
overflow-x: value;
}
Possible Values
| Value | Description |
|---|---|
visible |
Content overflows the container and remains visible (default) |
hidden |
Overflow content is clipped and hidden |
scroll |
A scrollbar is always shown, even if content doesn't overflow |
auto |
Scrollbar appears only when content overflows |
Example: Hidden Horizontal Overflow
The following example demonstrates hiding horizontal overflow content −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: orange;
width: 250px;
height: 45px;
border: 2px solid blue;
overflow-x: hidden;
overflow-y: scroll;
padding: 10px;
}
</style>
</head>
<body>
<h1>Horizontal Overflow Hidden</h1>
<div class="container">
Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y properties in web development.
</div>
</body>
</html>
An orange box with blue border appears. The text that exceeds the horizontal width is hidden, while vertical scrolling is enabled for the overflow content.
Example: Scrollable Horizontal Overflow
This example shows horizontal scrolling when content overflows −
<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
background-color: lightblue;
width: 200px;
height: 100px;
border: 2px solid navy;
overflow-x: auto;
overflow-y: hidden;
padding: 10px;
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Horizontal Scrolling</h1>
<div class="scroll-container">
This is a very long line of text that will definitely exceed the container width and trigger horizontal scrolling behavior.
</div>
</body>
</html>
A light blue box with navy border appears. The long text extends beyond the container width, and a horizontal scrollbar appears at the bottom to allow scrolling through the overflow content.
Conclusion
The overflow-x property provides precise control over horizontal content overflow. Use hidden to clip excess content, auto for conditional scrollbars, or scroll for always-visible scrollbars.
Updated on: 2026-03-15T12:16:01+05:30
373 Views
Advertisements