CSS Overflow

The overflow property specifies how content should behave when it exceeds the size of its container.

Overflow Values

• visible
• hidden
• scroll
• auto

.box{

    width:250px;

    height:120px;

    overflow:auto;

}

overflow: visible; is the default value. Content that exceeds the container remains visible outside the element.

.box{

    width:200px;

    height:100px;

    overflow:visible;

}

overflow: hidden; hides any content that extends beyond the container's boundaries.

.box{

    width:250px;

    height:120px;

    overflow:hidden;

}

.image-box{

    overflow:hidden;

}

overflow: scroll; always displays horizontal and vertical scrollbars, even if the content fits inside the container.

.box{

    width:250px;

    height:120px;

    overflow:scroll;

}

overflow: auto; automatically adds scrollbars only when the content exceeds the size of the container.

.box{

    width:300px;

    height:150px;

    overflow:auto;

}

.content{

    overflow:auto;

}

The overflow-x property controls how content behaves when it exceeds the width of an element.

.box{

    width:300px;

    overflow-x:scroll;

}

.table-box{

    overflow-x:auto;

}

The overflow-y property controls how content behaves when it exceeds the height of an element.

.box{

    height:200px;

    overflow-y:scroll;

}

.content{

    height:250px;

    overflow-y:auto;

}

Overflow properties help create responsive websites by preventing content from breaking the layout on smaller screens.

.table-responsive{

    overflow-x:auto;

}

Example 1: Responsive Table

.table-box{

    overflow-x:auto;

}

Example 2: Scrollable Content

.article{

    height:300px;

    overflow-y:auto;

}

Example 3: Hide Extra Image Area

.gallery{

    overflow:hidden;

}

.box{

    overflow:auto;

}

The proper use of the overflow property improves the appearance and usability of your webpages, especially when working with fixed-size containers.

• Use overflow:auto; whenever possible.
• Use overflow:hidden; to hide unwanted content.
• Use overflow-x:auto; for responsive tables.
• Use overflow-y:auto; for long content sections.
• Avoid unnecessary horizontal scrolling.
• Set fixed width and height before using overflow.
• Test overflow behavior on mobile devices.
• Choose the overflow value based on user experience.

❌ Incorrect

.box{

    overflow:scroll;

}

✔ Better

.box{

    overflow:auto;

}

CSS Overflow properties are fully supported by all modern web browsers.

1. What is the purpose of the CSS overflow property?
2. What are the four values of the overflow property?
3. What is the default value of overflow?
4. What is the difference between overflow:hidden and overflow:auto?
5. When should you use overflow:scroll?
6. What is the purpose of overflow-x?
7. What is the purpose of overflow-y?
8. Which overflow value is most commonly used?
9. How does overflow improve responsive design?
10. Can overflow be applied separately for horizontal and vertical directions?

In this lesson, you learned:

• ✔ Introduction to CSS Overflow.
• ✔ overflow: visible.
• ✔ overflow: hidden.
• ✔ overflow: scroll.
• ✔ overflow: auto.
• ✔ overflow-x.
• ✔ overflow-y.
• ✔ Overflow in Responsive Design.
• ✔ Practical Overflow Examples.
• ✔ Overflow Comparison Table.
• ✔ Best Practices and Common Mistakes.