CSS overflow-x property

Description

CSS overflow-x property represents overflow of content along horizontal direction i.e. from left and right sides.

overflow-x : visible | hidden | scroll | auto

visibleDefault: The content overflows horizontally out of the boundaries of the box and is also visibile.; overflow-x: visible;
Try it
hidden: In this case, the content that overflows horizontally out of the box becomes invisible.; overflow-x: hidden;
Try it
scroll: It provides horizontal scrollbar no matter whether the content overflows or not.; overflow-x: scroll;
Try it
auto: It is same as 'scroll' but it provides horizontal scrollbar only when the content overflows out of the box.; overflow-x: auto;
Try it

It applies to block containers, grid containers, and flex containers.

Code

CSS

.parent{
width:80px;
height:120px;
border:1px solid black;
overflow-x:auto;
}
.child{
min-width:115px;
height:auto;	
}

HTML

<div class="parent">
<div class="child">
		What happens when the content overflows out of the box?
		</div>
</div>