CSS Overflow
Written By: Avinash Malhotra
Last Updated on
CSS Overflow Property
CSS Overflow Property controls the behavior of overflowing content from an element. The possible values are auto, visible, scroll and hidden. Overflow can be used when width or height of content is more than parent element.
Check example below
Click to change overflow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit officia soluta ipsa, aut earum delectus nisi, consectetur est porro molestias eaque provident inventore beatae excepturi assumenda, veniam sint ab quidem? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est, numquam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab, delectus.
overflow is the shorthand of overflow-x and overflow-y. Instead of using overflow-x or overflow-y, we can use only overflow with one or two values.
overflow visible
overflow visible is usually default value of overflow property in most of the browsers. This will visible overflowing content from a element.
<style>
.content{
border: 1px solid gray;
height:60px;
padding:10px;
overflow:visible;
}
</style>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minima expedita sit id veniam. Dolorum molestiae libero facilis unde vero atque minus vel nobis hic reiciendis nesciunt, earum facere illo.
</div>
overflow auto
overflow auto is used when width or height of content is more and we want scrollbar in element. If width is more, scroll will comes in x-axis and if height is more, scroll will comes in y-axis.
<style>
.content{
border: 1px solid gray;
height:60px;
padding:10px;
overflow:auto;
}
</style>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minima expedita sit id veniam. Dolorum molestiae libero facilis unde vero atque minus vel nobis hic reiciendis nesciunt, earum facere illo.
</div>
overflow hidden
overflow hidden is used to hide overflowing content from an element.
<style>
.content{
border: 1px solid gray;
height:60px;
padding:10px;
overflow:hidden;
}
</style>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minima expedita sit id veniam. Dolorum molestiae libero facilis unde vero atque minus vel nobis hic reiciendis nesciunt, earum facere illo.
</div>
overflow scroll
overflow scroll is used to see visible scrollbar even if content is not overflowing.
<style>
.content{
border: 1px solid gray;
padding:10px;
overflow:scroll;
}
</style>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minima expedita sit id veniam. Dolorum molestiae libero facilis unde vero atque minus vel nobis hic reiciendis nesciunt, earum facere illo.
</div>