CSS Make Div Scrollable

We will understand the CSS Make div scrollable in this article.

Div

The "div" is the HTML element that defines the division in the HTML document.

Syntax:

The <div> and </div> are the opening tag and closing tag in the above-given syntax. The content is written inside the opening tag and closing tag.

We can make the <div> element scrollable by setting the height and width of the div element and utilizing the CSS overflow property.

CSS Overflow

It is the CSS property that is utilized to prevent the content from overflowing from the container.

Syntax:

We can set the value of the CSS overflow property to "auto" or "scroll". Although the CSS overflow property can take various values to make the <div> element scrollable, we can only give values "auto" or "scroll". Following are the descriptions of the overflow values:

Auto: If the content fits in the container, the "auto" option leaves it as it is. If it does not, the "auto" option adds a scroll bar.
Scroll: It is utilized to clip the overflowed content and add a scroll bar either vertically, horizontally, or vertically and horizontally on the basis of the size of the HTML element.

Vertical Scroll Bar

We can create the vertical scroll bar by utilizing the CSS overflow-x and CSS overflow-y properties.

Syntax:

overflow-x: hidden;
overflow-y: auto;

The overflow-x property is given the value of "hidden," which hides the scroll bar of the x-axis, and the overflow-y property is given the value of "auto," which creates a scroll bar on the vertical side.

Horizontal Scroll Bar

We can create the horizontal scroll bar by utilizing the CSS overflow-x and CSS overflow-y properties.

Syntax:

overflow-x: auto;
overflow-y: hidden;

The overflow-y property is given the value of "hidden," which hides the scroll bar of the x-axis, and the overflow-y property is given the value of "auto," which creates a scroll bar on the horizontal side.

Demonstrations of Div Scrollable

Let us understand how to make div scrollable with the help of the demonstrations.

Demo 1:

We will construct a div element with a class of "container" in the following demonstration.

We will make the div scrollable by giving the value of "scroll" to the CSS overflow property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Making a div scrollable utilizing the CSS overflow property</title>
    <style>
        .container {
            height: 100px;
            width: 100px;
            background-color: yellowgreen;
            overflow: scroll;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>overflow: scroll</h2>
    <div class="container">
        We have utilized the CSS overflow property and assigned it a "scroll" value to construct the scrollable div.
    </div>
</body>
</html>

Output:

Here is the outcome below, where we can witness that the scrollbar emerges on the <div> element with a class of "container".

Demo 2:

In the following demonstration, we will construct a div element and make it scrollable by setting the CSS overflow property to auto.

The content that is written in the class "div1" fits into it, so the scroll bar does not appear utilizing the "auto" value to overflow property.

The content inside the class "div2" does not fit inside it, so the scroll bar emerges with the help of the "auto" value to overflow property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Making div scrollable utilizing the CSS overflow property</title>
    <style>
        .div1 {
            height: 75px;
            width: 150px;
            background-color: plum;
            overflow: auto;
            padding: 10px;
        }
        .div2 {
            height: 100px;
            width: 100px;
            background-color: plum;
            overflow: auto;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>overflow: auto</h2>
    <div class="div1">
        We have utilized the CSS overflow property and provided it the value "auto".
    </div> <br> <br>
    <div class="div2">
        We are making the div scrollable with the help of the CSS overflow property and assigning it the "auto" value.
    </div>
</body>
</html>

Output:

Here is the outcome below, where we can witness that the content in class div1 does not overflow, which is why the scrollbar is not observable.

The content written inside the class div2 overflows, so the scrollbar emerges on the element of class div2.

Demo 3:

We will put a vertical scroll bar on the <div> HTML element with the help of the CSS overflow-x property and CSS overflow-y property.

We will put the "hidden" value to the CSS overflow-x property and the "auto" value to the CSS overflow-y property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adding a div scrollable vertically with the help of the CSS overflow property</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: hotpink;
            overflow-x: hidden;
            overflow: auto;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Vertical div scrollable</h2>
    <div>
        We are making a vertical div scrollable with the help of the CSS overflow-x property and CSS overflow-y property.
    </div>
</body>
</html>

Output:

Here, in the outcome, we can witness that when the content in the <div> HTML element overflows, then the vertical scrollbar is visible on the <div> HTML element.

Demo 4:

We will put a horizontal scroll bar on the <div> HTML element with the help of the CSS overflow-x property and CSS overflow-y property.

We will assign the value "auto" to the CSS overflow-x property and the value "hidden" to the CSS overflow-y property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Making a div scrollable horizontally by utilizing the CSS overflow property</title>
    <style>
        div {
            margin: 6px, 6px;
	  padding: 6px;
            background-color: gray;
            width: 250px;
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;
        }
    </style>
</head>
<body>
    <h2>Horizontal div scrollable</h2>
    <div>
        We are making a div scrollable on the horizontal side with the help of the CSS overflow-x and CSS overflow-y properties.
    </div>
</body>
</html>

Output:

Here, in the outcome below, we can witness that the content under the <div> element does not fit.

The scrollbar is visible on the <div> element on the horizontal side.

Browser Support

The browsers that support the overflow, overflow-x, and overflow-y CSS properties are as follows:

Safari
Google Chrome
Microsoft Edge
Firefox
Opera

Conclusion

We have understood how to create a CSS div scrollable in this article. Some points to remember are given downwards:

We can construct a scrollable div by utilizing the overflow, overflow-x, and overflow-y CSS properties.
To make the div scrollable, we can set either the "auto" or "scroll" value of the CSS overflow property.
If we require the vertical scrollbar, then overflow-x is given the "hidden" value, and overflow-y is given the "auto" value.
If we require the horizontal scrollbar, overflow-x is given the "auto" value, and overflow-y is given the "hidden" value.