</CSS3 OVERFLOW PROPERTY>

What is CSS3 Overflow property?

Overflow property is used to fit the content inside the containers with horizontal or vertical scrollbars

CSS3 Overflow syntax
overflow: auto | scroll | visible | hidden | initial | inherit;

Clearfix
The overflow property is also used in float clearing (clearfix).


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow:auto;
}
</style>


	

<head>
	<style>
.tdb-overflow{
	width:60px;
	height:100px;
	overflow:auto;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow">Overflow property</h1>
</body>

Try it Yourself

OVERFLOW-X

Overflow-x property is used to fit the content inside the containers with horizontal scrollbar.

CSS3 Overflow syntax
overflow-x: auto | scroll | visible | hidden | initial | inherit;


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow-x:auto;
}
</style>


	

<head>
	<style>
.tdb-overflow{
	width:60px;
	height:100px;
	overflow-x:auto;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow"Overflow property</h1>
</body>

Try it Yourself

OVERFLOW-Y

Overflow-y property is used to fit the content inside the containers with vertical scrollbar.

CSS3 Overflow syntax
overflow-y: auto | scroll | visible | hidden | initial | inherit;


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow-y:auto;
}
</style>


	

<head>
	<style>
.tdb-overflow{
	width:60px;
	height:50px;
	overflow-y:auto;
	overflow-x:hidden;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow">Overflow property</h1>
</body>

Try it Yourself

OVERFLOW VISIBLE

Overflow:visible is default value of CSS3 Overflow property. The overflow is renders outside the container box.


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow: visible;
	background-color:black;
	color:orange;
}
</style>


<head>
	<style>
	.tdb-overflow{
	width:100px;
	height:100px;
	overflow: visible;
	background-color:black;
	color:orange;
}
	</style>
</head>
<body>
	<h1 class="tdb-overflow">Overflow property</h1>
</body>

Try it Yourself

OVERFLOW SCROLL

By using this property. The overflow is clipped, and the vertical and horizontal scroll-bars are added to the HTML container classes.

CSS3 Overflow syntax
overflow-y: scroll;


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:60px;
	overflow: scroll;
	background-color:black;
	color:orange;
}
</style>


	

<head>
	<style>
	.tdb-overflow{
	width:100px;
	height:60px;
	overflow: scroll;
	background-color:black;
	color:orange;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow">CSS3 overflow property</h1>
</body>

Try it Yourself