Home » Learn » CSS Tutorial » CSS Overflow

CSS Overflow

When the content is bigger than its box, the extra part is “overflow”. The overflow property decides what happens to it.

ValueResult
visibleDefault. The extra content shows outside the box
hiddenThe extra content is cut off
scrollScrollbars always show
autoScrollbars show only when needed
.box { width: 200px; height: 80px; overflow: auto; border: 1px solid #999; }
overflow: auto
This box has a fixed height and overflow: auto. When the text is longer than the box, a scroll bar appears so the visitor can read all of it. Keep writing more text here to see how scrolling works in practice.

overflow-x and overflow-y

.table-wrap { overflow-x: auto; }        /* scroll sideways only */
.chat       { overflow-y: scroll; height: 300px; }

Other common uses

  • overflow: hidden hides content outside a rounded box, like an image inside a card with border-radius.
  • overflow: hidden on a parent also clears floats, see CSS Float.
  • With white-space: nowrap and text-overflow: ellipsis it makes a one-line text with three dots, see CSS Text.
Note: Keep overflow: hidden in mind when something “disappears”. A parent with it can cut dropdowns and shadows of its children.

Summary

  • overflow controls content that does not fit its box: visible, hidden, scroll or auto.
  • Use overflow-x for wide tables and overflow-y for long boxes.
  • Next: CSS Opacity.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.