Making a div Vertically Scrollable using CSS
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:
<!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>
<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:
<!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>
<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

In this Example:
- The
.container
is given a fixed width of300px
and height of110px
, withmargin
andpadding
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 torgb(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.