Making a div Vertically Scrollable using CSS
Last Updated :
11 Jul, 2025
The overflow property in CSS controls how content that goes beyond an element's boundaries is handled. It can either hide the extra content or add scrollbars so users can scroll to see more without leaving the current view. This helps display large amounts of content, such as text, images, or tables, in web applications.
By using the methods given below, we can make a div vertically scrollable.
1. Using the overflow-x and Overflow-y Property
The overflow-x and overflow-y properties are used to control horizontal and vertical scrolling, respectively.
Now, let us understand with the help of the example:
html
<!DOCTYPE html>
<html>
<head>
<style>
/* Container with fixed size */
.container {
width: 300px;
height: 150px;
border: 2px solid #000;
margin: 20px;
padding: 10px;
overflow-x: scroll; /* Horizontal scroll */
overflow-y: scroll; /* Vertical scroll */
}
.content {
width: 500px;
height: 300px;
background-color: rgb(143, 226, 143);
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is an example of horizontal overflow (overflow-x) and vertical overflow (overflow-y) in action.</p>
<p>Scroll horizontally to see the content overflow to the right.</p>
<p>Scroll vertically to see the content overflow downward.</p>
</div>
</div>
</body>
</html>
Output:
In this Example:
- The <style> tag within the <head> section contains the CSS styles for the overflow behavior.
- The container is sized to be 300px by 150px, while the content inside it is intentionally larger, causing both horizontal and vertical overflow.
overflow-x: scroll ensures horizontal scrolling is enabled.overflow-y: scroll enables vertical scrolling when the content overflows.
2. Using overflow:auto Property
The overflow: auto property adds scrollbars only when the content doesn’t fit inside the box. Since the text is longer than the box’s height, a vertical scrollbar appears so you can scroll and read everything easily.
Now, let us understand with the help of the example:
html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 5px;
padding: 5px;
background-color: rgb(143, 226, 143);
width: 300px;
height: 110px;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
HTML is the language of the web, used
by billions of websites to create
the pages you see every day. Want to
learn HTML from scratch and make
your web pages? This HTML tutorial is
the one-stop destination for you!
To show you how fun and easy HTML is,
we have provided a classic example
of writing “Hello, World!” in HTML
</div>
</body>
</html>
Output
Making a div vertically scrollable using CSSIn this Example:
- The
.container is given a fixed width of 300px and height of 110px, with margin and padding to add space inside and around the container. - The
overflow: auto; property ensures that scrollbars appear only if the content inside the .container exceeds the container’s set dimensions. It shows a vertical scrollbar if the content overflows vertically. - The background color of the
.container is set to rgb(143, 226, 143), giving it a light green shade to distinguish it from other content. - With the vertical overflow in this case, when the content exceeds the container’s height, the
overflow: auto; ensures that a scrollbar is displayed for easy navigation through the content.
Conclusion
Making a div vertically scrollable using CSS is a simple and effective way to manage content that exceeds a container's height. By setting a fixed height and using the overflow-y property, you can easily implement vertical scrolling. Additionally, you can enhance the user experience with smooth scrolling and custom scrollbar styles. By following best practices and considering responsive design, you can create scrollable containers that work well across all devices.
Making a div vertically scrollable using CSS
Similar Reads
CSS Website Layout CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo.html<html>
4 min read
How to make div not larger than its contents using CSS? There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en"
3 min read
Building Tooltip using CSS A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip.Tooltip PositionsTooltips can be posi
7 min read
How to Set Background Color Opacity without Affecting Text in CSS? Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c
2 min read
Transition shorthand with multiple properties in CSS? The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to
2 min read
How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element
1 min read
How to remove the space between inline-block elements? To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin
3 min read
6 Best CSS frameworks You should Know to design Attractive Websites If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz
3 min read
Space between two rows in a table using CSS The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp
1 min read
What is the difference between display: inline and display: inline-block in CSS? The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w
4 min read