How to add a vertical scrollbar to a div automatically with CSS?

Sometimes, we want to add a vertical scrollbar to a div automatically with CSS.

In this article, we’ll look at how to add a vertical scrollbar to a div automatically with CSS.

How to add a vertical scrollbar to a div automatically with CSS?

To add a vertical scrollbar to a div automatically with CSS, we set the overflow-y property to scroll.

For instance, we write

<div class="ScrollStyle">
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
  Scrollbar Test!<br />
</div>

to add a div.

Then we write

.ScrollStyle {
  max-height: 150px;
  overflow-y: scroll;
}

to set the max height of the div.

And we add overflow-y: scroll; to make the vertical scrollbar show automatically when its contents overflows the div.

Conclusion

To add a vertical scrollbar to a div automatically with CSS, we set the overflow-y property to scroll.