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: scroll
The CSS overflow: scroll property forces the display of scrollbars when content exceeds the dimensions of its container. Unlike other overflow values, scroll always shows scrollbars regardless of whether the content actually overflows.
Syntax
selector {
overflow: scroll;
}
How It Works
When you set overflow: scroll, the browser will −
- Clip any content that exceeds the container's dimensions
- Always display both horizontal and vertical scrollbars
- Allow users to scroll through the hidden content
Example
The following example demonstrates overflow: scroll with content that exceeds the container height ?
<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
background-color: #f0f8ff;
width: 300px;
height: 100px;
border: 2px solid #4169e1;
padding: 10px;
overflow: scroll;
margin: 20px 0;
}
.content {
line-height: 1.5;
color: #333;
}
</style>
</head>
<body>
<h3>Container with overflow: scroll</h3>
<div class="scroll-container">
<div class="content">
This is a demonstration of CSS overflow: scroll property.
The content in this container is longer than the available space,
so scrollbars appear to allow users to view all the text.
Notice that both horizontal and vertical scrollbars are visible
even if only one direction needs scrolling. This ensures consistent
layout across different content lengths.
</div>
</div>
</body>
</html>
A light blue container with blue border appears, containing text that exceeds the container height. Both horizontal and vertical scrollbars are visible, allowing the user to scroll through all the content.
Key Points
-
overflow: scrollalways shows scrollbars, even when content fits - Both horizontal and vertical scrollbars appear by default
- Content that exceeds boundaries is clipped but remains accessible through scrolling
- Use
overflow-x: scrolloroverflow-y: scrollfor single-direction scrolling
Conclusion
The overflow: scroll property provides a reliable way to handle content that exceeds container boundaries by always displaying scrollbars. This ensures users can access all content while maintaining consistent layout behavior.
Updated on: 2026-03-15T12:15:47+05:30
442 Views
Advertisements