By /

CSS Overflow

  • Purpose: The overflow property in CSS controls how content that is too large to fit within an element’s box is handled.
  • Syntax: element { overflow: value; }
  • element: The HTML element you want to style.
  • value: Can be one of the following:
    • visible: (Default) Content that overflows is visible outside the element’s box.
    • hidden: Content that overflows is clipped andhidden.
    • scroll: Adds scrollbars to the element, allowing the user to scroll to see the hidden content.
    • auto: Adds scrollbars only when necessary (if content overflows).
  • Example:
.container {
   width: 200px; 
   height: 100px; 
   overflow: auto; 
}

In this example, if the content within the .container element is larger than its specified width or height, scrollbars will appear, allowing the user to see the entire content.

  • Example with overflow-x and overflow-y:
.container {
  overflow-x: scroll; 
  overflow-y: hidden; 
}

This will add a horizontal scrollbar to the .container but no vertical scrollbar.

Scroll to Top