CSS Overflow Properties

The overflow property in CSS specifies what should happen if content overflows an element's box. It helps control the behavior of content that exceeds the container's bounds.

Understanding the different values of the overflow property can greatly enhance your ability to manage overflowing content.

Visible

overflow: visible; means that the overflow is not clipped. The content will be rendered outside the element's box.

Try yourself 
        
             .overflow-visible {
	width: 200px;
	height: 100px;
	background-color: lightblue;
	overflow: visible;
	border: 1px solid black;
}

Hidden

overflow: hidden; means that the overflow is clipped, and the rest of the content will be invisible.

Try yourself 
        
             .overflow-hidden {
	width: 200px;
	height: 100px;
	background-color: lightcoral;
	overflow: hidden;
	border: 1px solid black;
}

Scroll

overflow: scroll; means that the overflow is clipped, and a scrollbar is added to see the rest of the content.

Try yourself 
        
             .overflow-scroll {
	width: 200px;
	height: 100px;
	background-color: lightgreen;
	overflow: scroll;
	border: 1px solid black;
}

Auto

overflow: auto; means that the overflow is clipped, but a scrollbar is added only when necessary.

Try yourself 
        
             .overflow-auto {
	width: 200px;
	height: 100px;
	background-color: lightpink;
	overflow: auto;
	border: 1px solid black;
}

Overflow-X and Overflow-Y

You can control the overflow for each axis separately using overflow-x and overflow-y.

overflow-x: visible; overflow-y: hidden; will make the content visible horizontally but clipped vertically.

Try yourself 
        
             .overflow-x-visible-y-hidden {
	width: 200px;
	height: 100px;
	background-color: lightyellow;
	overflow-x: visible;
	overflow-y: hidden;
	border: 1px solid black;
}

overflow-x: hidden; overflow-y: scroll; will clip the content horizontally but add a scrollbar for vertical overflow.

Try yourself 
        
             .overflow-x-hidden-y-scroll {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid black;
}

overflow-x: auto; overflow-y: auto; will add scrollbars for both axes only when necessary.

Try yourself 
        
             .overflow-x-auto-y-auto {
	width: 200px;
	height: 100px;
	background-color: lightgoldenrodyellow;
	overflow-x: auto;
	overflow-y: auto;
	border: 1px solid black;
}

Clip

overflow: clip; will clip the overflow, making the overflowed content inaccessible.

Try yourself 
        
             .overflow-clip {
	width: 200px;
	height: 100px;
	background-color: lightblue;
	overflow: clip;
	border: 1px solid black;
}