CSS Overflow

The overflow property in CSS handles content that doesn’t fit inside an element’s defined dimensions. It helps manage whether content should be visible, hidden, or scrollable.

Overflow Visible

This is the default value. If content exceeds the container, it overflows visibly outside the box.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .visible-box {
      width: 200px;
      height: 60px;
      border: 2px solid green;
      overflow: visible;
      background-color: #f3f3f3;
    }
  </style>
</head>
<body>

  <h3>Overflow: Visible</h3>
  <div class="visible-box">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio esse dignissimos velit doloribus mollitia hic doloremque praesentium, illum adipisci harum labore voluptate nam earum commodi molestias tempora. Sit, sequi corporis.</p>
  </div>

</body>
</html>

Overflow Hidden

This value cuts off any content that doesn’t fit inside the box. The extra part is not shown.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .hidden-box {
      width: 200px;
      height: 60px;
      border: 2px solid red;
      overflow: hidden;
      background-color: #ffe4e1;
    }
  </style>
</head>
<body>

  <h3>Overflow: Hidden</h3>
  <div class="hidden-box">
    This text will overflow and be hidden from view completely. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex veritatis quam enim, iste voluptas nisi! Numquam aliquid adipisci sit corporis molestiae! Quod assumenda reiciendis cumque in temporibus dolores sapiente error.
  </div>

</body>
</html>

Overflow Scroll

This value adds scrollbars regardless of whether the content fits or not. It allows scrolling both vertically and horizontally.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .scroll-box {
      width: 200px;
      height: 60px;
      border: 2px solid blue;
      overflow: scroll;
      background-color: #e6f7ff;
    }
  </style>
</head>
<body>

  <h3>Overflow: Scroll</h3>
  <div class="scroll-box">
    This box has scrollbars even if the content is slightly overflowing. You can scroll to view it.
  </div>

</body>
</html>

Overflow Auto

This value adds scrollbars only when needed — if the content overflows, scrollbars appear; otherwise, they don’t.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .auto-box {
      width: 200px;
      height: 60px;
      border: 2px solid purple;
      overflow: auto;
      background-color: #f9f0ff;
    }
  </style>
</head>
<body>

  <h3>Overflow: Auto</h3>
  <div class="auto-box">
    This is some extra long text that will trigger scrollbars *only if* it overflows.
  </div>

</body>
</html>