CSS Overflow

Home / CSS / CSS Overflow

CSS Overflow

CSS-Overflow:

In CSS, the overflow property is used to control how content that overflows the boundaries of an element is displayed. It's often used with containers that have a fixed or limited size to determine how to handle content that exceeds that size. The overflow property can take several values, each of which determines a different behavior:

visible (default): This value allows content to overflow the container without any clipping. It will be visible outside the container's boundaries.

<style>
    .container {
      overflow: visible;
    }
  </style>

hidden: Content that overflows the container will be clipped and not visible. This is often used to hide overflowed content.

<style>
    .container {
      overflow: hidden;
    }
  </style>

scroll: This value adds horizontal and/or vertical scrollbars to the container when its content overflows. Users can scroll to view the hidden content.


 <style>
    .container {
      overflow: scroll;
    }
  </style>

auto: Similar to scroll, it adds scrollbars when needed. If the content fits within the container, no scrollbars are displayed. If the content overflows, scrollbars appear.


 <style>
    .container {
      overflow: auto;
    }
  </style>

overlay: This value is similar to auto but only displays scrollbars when the content overflows. It does not reserve space for the scrollbars, which can overlap content.


 <style>
    .container {
      overflow: overlay;
    }
  </style>

clip: Content that overflows the container is clipped, but unlike hidden, it doesn't hide scrollbars. This is rarely used and often unnecessary, as it simply cuts off the overflowed content.

 
<style>
    .container {
      overflow: clip;
    }
  </style>

The overflow property can be applied to various elements like divs, iframes, and other containers. It's particularly useful when dealing with elements of fixed size, like a modal dialog or a sidebar, and you want to control how the content behaves when it exceeds those dimensions.

Here's an example of how you might use the overflow property to create a scrollable container:

<style>
    .container {
      width: 300px;
      height: 200px;
      overflow: auto;
    }
  </style>

In this example, if the content inside .container exceeds the specified width or height, scrollbars will appear to allow users to scroll and view the hidden content.