Skip to main content
Practice

Overflow Handling (overflow)

The CSS overflow property specifies how to handle content that overflows an element's boundaries.


Key Values for Overflow​

  • visible: The default value; content overflows the element without clipping.

  • hidden: Content that overflows the element is hidden and not visible.

  • scroll: Scrollbars are always displayed, and the content can be scrolled if it overflows.

  • auto: Scrollbars are displayed only when the content overflows.


Example:​

CSS
/* Hide content that overflows the element */
div#box1 {
  overflow: hidden;
}

/* Always show scrollbars if content overflows */
div#box2 {
  overflow: scroll;
}

/* Show scrollbars only when necessary */
div#box3 {
  overflow: auto;
}

Follow the highlighted parts of the code and try typing it in yourself.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.