Jul 9, 2023

CSS Overflow

The overflow property specifies the behavior that occurs when an element’s content overflows (doesn’t fit) the element’s box.

Handling Overflowing Content

There may be a situation when the content of an element might be larger than the dimensions of the box itself. For example given width and height properties did not allow enough room to accommodate the content of the element.

CSS overflow property allowing you to specify whether to clip content, render scroll bars or display overflow content of a block-level element.

This property can take one of the following values: visible (default), hidden, scroll, and auto. CSS3 also defines the overflow-x and overflow-y properties which allow for independent control of the vertical and horizontal clipping.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example of CSS overflow property</title>
  <style>
      div {
          width: 250px;
          height: 150px;
          border: 1px solid #cccccc;
      }
      div.scroll {            
          overflow: scroll;
      }
      div.hidden {
          overflow: hidden;
      }
  </style>
</head>
<body>
  <h1>Play with the size of div boxes to see how it works</h1>
  <h2>overflow:scroll</h2>
  <div class="scroll">
      You can view the overflowed content using scrollbar.
      You can view the overflowed content using scrollbar.
      You can view the overflowed content using scrollbar.
      You can view the overflowed content using scrollbar.
      You can view the overflowed content using scrollbar.
      You can view the overflowed content using scrollbar.
      You can view the overflowed content using scrollbar.
  </div>
  <h2>overflow:hidden</h2>
  <div class="hidden">
      The overflowed content is hidden.
      The overflowed content is hidden.
      The overflowed content is hidden.
      The overflowed content is hidden.
      The overflowed content is hidden.
      The overflowed content is hidden.
      The overflowed content is hidden.
  </div>
</body>
</html>

`Value`	Description
`visible`	The default value. Content is not clipped; it will be rendered outside the element’s box, and may thus overlap other content.
`hidden`	Content that overflows the element’s box is clipped and the rest of the content will be invisible.
`scroll`	The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content.
`auto`	If content overflows the element’s box it will automatically provides the scrollbars to see the rest of the content, otherwise scrollbar will not appear.