Sometimes the content inside an element is bigger than the box itself.
When this happens, CSS uses the overflow property to decide what should happen to the extra content.
Let’s understand overflow by using real examples.
With overflow set to hidden, any content that goes outside the box is not visible.
This is useful when you want to keep layouts clean and prevent content from breaking the design.
With overflow set to scroll, scrollbars appear inside the box.
This allows users to view all the content without increasing the size of the element.
Real world use of overflow
Developers use overflow to:
- Control scroll areas
- Prevent layout breaking
- Create fixed size content boxes
- Build chat boxes and message areas
Developer tip
Use overflow hidden to clip content.
Use overflow auto to add scroll only when needed.
Avoid using overflow scroll unless you really need fixed scrollbars.
Practice task
Create a box with:
- Width: 220px
- Height: 120px
- Border: 2px solid red
- Overflow: hidden
Add long text inside and then change overflow to auto.
Next lesson
In the next page, you will learn about common box model problems and how to fix them in real projects.