close

CSS Overflow

Jonathan-Hill's avatar
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.

  • 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

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.

All contributors

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