Different ways to make div scrollable horizontally and vertically

You can handle content from being unexpected overflown by using the following methods.

While you make div scrollable, it will make your website good-looking and responsive for devices.

Different ways to make a DIV scrollable

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>

Result:

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;
}

Result:

3: Make div vertically scrollable

CSS:

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

Result:

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;
} 

Result:

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. 

5: Make div scrollable without showing the 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;
}

Result:

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 me explain this.

Properties:

overflow:

The overflow property specifies both the 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.

Hopefully, now you are able to make div scrollable in any way.