How to make div scrollable horizontally and vertically?

You can handle content from being unexpected overflown by using the following methods. It will make your website good-looking and responsive for devices.

Make div scrollable horizontally and vertically using CSS

Different ways to make a DIV scrollable

Method 1: Show a scrollbar both horizontally and vertically
Method 2: Make div horizontally scrollable
Method 3:Make div vertically scrollable
Method 4:Make scrollable when only necessary
Method 5: Make div scrollable without showing scrollbar 

Method 1: Show a scrollbar both horizontally and vertically

If you want to show a scrollbar both horizontally and vertically, then you can do it by controlling overflow. Make sure your width and height are exactly defined. 

CSS:

.scroll {
overflow: scroll; 
height:100px; 
width:400px
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}

HTML:

<div class="scroll">Content</div>

Method 2:Make div horizontally scrollable

CSS:

.scroll {
overflow-x: scroll;
white-space: nowrap;
height:100px; 
width:400px;
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}

Method 3:Make div vertically scrollable

CSS:

.scroll {
overflow-y: scroll; 
height:100px; 
width:400px
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}


Method 4: Make div scrollable when only necessary 

If you only want a scrollbar to appear when the box size limit is filled, just use overflow: auto. If you use use overflow-x: auto, the scroll will be visible after crossing the width limit.  Same thing you can apply to height and set overflow-y: auto.

CSS:

.scroll {
overflow: auto; 
height:100px; 
width:400px
padding-left:10px;
padding-right:10px;
border:1px solid gray;
} 

Sometimes scrollbar seems disgusting. So you can hide the scrollbar, while content will remain scrollable. To do this you should use the following codes with the above ones. 

Method 3: Make div scrollable without showing scrollbar  

.scroll::-webkit-scrollbar {
    display: none;
}

Or 

You can remove scrollbar space by setting width 0. Same method you can use to make the scrollbar thicker. 

.scroll::-webkit-scrollbar {
   width:0;
}

Make div scrollable - Important rules:

The scrollbar properties are overflow, overflow-x, overflow-y, and values of those properties are visible, hidden, scroll, auto, initial, and inherit. You can set any of those values for any property. Let explain this.

Properties:

overflow:

The overflow property specifies both horizontal and vertical area of the element- if the content overflows the element's content area.

overflow-x:

The overflow-x property specifies the horizontal area of the element- if the content overflows the element's content area.

overflow-y:

The overflow-y property specifies the vertical area of the element- if the content overflows the element's content area.

Values:

Visible:

Visible is the default value. The overflowed content also will be visible.

Hidden:

If the content length exceeds the container element's size, the extensive portion will be hidden. The hidden part won't be shown to the user.

Scroll:

This value makes the content scrollable, so the user will be able to see overflowed content by scrolling. 

Auto:

It will show the scrollbar when needed.

Initial:

This value sets this property to its default value.

Inherit:

Inherits this property from its parent element which is predefined.