CSS Overflow
Published Aug 8, 2021Updated Jan 9, 2025
The overflow property controls what happens to content that spills, or overflows, outside its box.
The most commonly used values are:
hidden: When set to this value, any content that overflows will be hidden from view.scroll: When set to this value, a scrollbar will be added to the element’s box so that the rest of the content can be viewed by scrolling.visible: When set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.
p {overflow: scroll;}
Here, if any of the paragraph content overflows (perhaps a user resizes their browser window), a scrollbar will appear so that users can view the rest of the content.
Overflow
- overflow
- Defines how a block level element should handle content that goes beyond its boundaries.
- overflow-x
- Defines how a block level element should handle content that goes beyond its x-axis boundary.
- overflow-y
- Defines how a block level element should handle content that goes beyond its y-axis boundary.
Learn CSS on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
- Beginner Friendly.6 hours