Overflow

If an element's contents are larger than the space allocated (e.g. if height / width are too small) the overflow property can be used to tell the browser how to handle any overflowed content.

 

Value Description
auto Same as scroll, but scrollbars are only added if needed
hidden Content of the element is cut off at the border and no scrollbars are visible
scroll Containing element size stays the same, but scrollbars are added to allow the use to see the content
visible Allows content to overflow the borders of its containing element

 

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			.scroll{
				display:block;
				border: 1px solid red;
				padding:5px;
				margin-top:5px;
				width:300px;
				height:50px;
				overflow:scroll;
				}
			.auto{
				display:block;
				border: 1px solid red;
				padding:5px;
				margin-top:5px;
				width:300px;
				height:50px;
				overflow:auto;
				}
		</style>
	</head>
	<body>
		<p>Example of scroll value:</p>
		<div class="scroll">
		I am going to keep lot of content here just to show
		you how scrollbars works if there is an overflow in
		an element box. This provides your horizontal as well
		 as vertical scrollbars.
		</div>
		<br />
		<p>Example of auto value:</p>
		<div class="auto">
		I am going to keep lot of content here just to show
		you how scrollbars works if there is an overflow in
		an element box. This provides your horizontal as well
		as vertical scrollbars.
		</div>
	</body>
</html>

Save & refresh browser:

Example of scroll value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

 

Example of auto value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

Leave a Reply