CSS  Overflow property

The CSS overflow property controls what happens to content that is too big to fit into an area.

The overflow property is used to determine whether to clip or to add scrollbars when the content of an element is too big to fit in the specified area.

Syntax

overflow: visible|hidden|scroll|auto;

Note: The overflow property only works for block elements with a specified height.

The example below show how the CSS overflow property can be applied.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style>
	div {
	  background-color: coral;
	  width: 300px;
	  height: 150px;
	  border: 1px solid #ccc;
	  overflow: auto;
	}
	h2{
		font-size: 35px;
		margin-bottom: 0;
	}
</style>
</head>
<body>
   <h2>Overflow: auto</h2>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet dictum sit amet justo donec enim diam vulputate. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Gravida rutrum quisque non tellus orci ac. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Magna etiam tempor orci eu lobortis elementum nibh tellus molestie. Porttitor eget dolor morbi non arcu risus quis varius quam.</div>
</body>
</html>

Output:

The output depends on the value of the overflow property as illustrated below

css overflow auto
css overflow visible
css overflow hidden
css overflow scroll

From the outputs above;

  • visible – is the default value where the content is not clipped and therefore renders outside it’s container element’s box.
  • hidden – content is clipped
  • scroll – the content is clipped and scrollbars are added both horizontally and vertically.
  • auto – this is similar to scroll but only adds scroll bars when necessary

CSS overflow-x and overflow-y

The overflow-x and overflow-y properties control the horizontal and vertical overflow of content in block-level elements.

Syntax

overflow-x: visible|hidden|scroll|auto;
overflow-y: visible|hidden|scroll|auto;

overflow-x determines whether to clip the content, add a scroll bar, or display overflow content when it overflows the left and right edges of a block-level element.
overflow-y determines what to do with content when it overflows the top or bottom edges of a block-level element.