It's easy to make a horizontally & vertically scrollable div by using Css overflow property. Overflow property has multiple values. For example, 
  1. overflow:auto; is used to add a scrollbar whenever a box's content is too large to fit the content in the box (element).
    2. The auto value is similar to scroll . But it adds scrollbars only whenever it's necessary.
  2. The overflow:hidden; property is used to prevent scrollbars from showing up, even when they're necessary.
  3. overflow-x:auto; is used for adding a horizontal scrollbar whenever it's needed or required.
  4. overflow-x:hidden; prevents to add horizontal scrollbar even when it's required.
  5. overflow-y:auto; is used for adding a vertical scrollbar.
  6. overflow-y:hidden; is used to prevent vertical scrollbar from showing up.
The overflow property only works for the block elements with a specified height.
Example of horizontal & vertical scrolling div
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Try it Yourself »

Scroll a div horizontally and vertically on button click.

If you want whenever someone will click on a button, the div element will scroll vertically and horizontally, then in this example, I will show you how to scroll a div horizontally and vertically on button click with JavaScript.

button click scroll div with javascript
Lorem ipsum dolor amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Try it Yourself »

Conclusion

In this article, you have learned how to make a div scrollable vertically and horizontally using css.