How to Make a Div Vertically Scrollable using CSS

In this example, we will learn how to make a div vertically scrollable using CSS. We can use the overflow-y property to make a div vertically scrollable when its content overflow on the y-axis of the div.

Prerequisites

• CSS width property
• CSS height property
• CSS overflow-y property

Example

HTML

        <div class="make-this-scroll">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum debitis magnam natus, sed ratione voluptatem
            laudantium quam recusandae illum architecto, aliquid porro error et, esse inventore fugiat incidunt rem
            provident. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem repellendus veritatis neque autem
            voluptatibus. Eaque laborum, assumenda minus sapiente sed incidunt numquam tenetur alias doloribus porro,
            aut quam iste labore.
        </div>

CSS

        .make-this-scroll {
            width: 200px;
            height: 200px;
            overflow-y: scroll;
        }

Output

Here, we made a div with a height of 200px and width 200px. Whenever the content exceeds the element box, it overflows. So, to decide what to do when the content overflows we can use the overflow property. Here, the overflow-y property is set to make the overflowed contents scroll vertically.

Conclusion

In this example, we learned how to make a div vertically scrollable using CSS. We used the height and width property to set an element's box and the overflow-y property to make a div vertically scrollable when its content overflow on the y-axis of the element's box.