0
0
CSSmarkup~5 mins

Overflow property in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The overflow property controls what happens when content is too big for its container. It helps keep your page neat and easy to read.

When text or images spill outside a box and you want to hide or scroll them.
When you want to add scrollbars inside a fixed-size area.
When you want to show a warning that content is cut off.
When you want to prevent layout breakage from extra content.
When you want to control how extra content is handled in menus or cards.
Syntax
CSS
overflow: visible | hidden | scroll | auto;

visible shows all content, even if it spills out.

hidden cuts off extra content without scrollbars.

Examples
Content spills outside the container and is fully visible.
CSS
overflow: visible;
Extra content is cut off and not shown.
CSS
overflow: hidden;
Scrollbars always appear, letting users scroll to see extra content.
CSS
overflow: scroll;
Scrollbars appear only if content is too big.
CSS
overflow: auto;
Sample Program

This example shows four boxes with the same size but different overflow settings. You can see how the text behaves differently in each box.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Overflow Property Example</title>
<style>
  .box {
    width: 12rem;
    height: 6rem;
    border: 2px solid #333;
    margin: 1rem;
    padding: 0.5rem;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }
  .visible {
    overflow: visible;
    background-color: #e0f7fa;
  }
  .hidden {
    overflow: hidden;
    background-color: #ffe0b2;
  }
  .scroll {
    overflow: scroll;
    background-color: #c8e6c9;
  }
  .auto {
    overflow: auto;
    background-color: #f3e5f5;
  }
</style>
</head>
<body>
  <h1>Overflow Property Demo</h1>
  <p>Each box has fixed size. The text inside is longer than the box.</p>
  <div class="box visible">
    <strong>overflow: visible;</strong><br />
    This text is too long for the box and spills outside.
  </div>
  <div class="box hidden">
    <strong>overflow: hidden;</strong><br />
    This text is too long for the box but is cut off and hidden.
  </div>
  <div class="box scroll">
    <strong>overflow: scroll;</strong><br />
    This text is too long for the box and scrollbars always show.
  </div>
  <div class="box auto">
    <strong>overflow: auto;</strong><br />
    This text is too long for the box and scrollbars appear only if needed.
  </div>
</body>
</html>
OutputSuccess
Important Notes

Scrollbars with scroll always show, even if not needed, which can look cluttered.

auto is usually best for user-friendly scrolling.

Use hidden carefully because content can be lost and inaccessible.

Summary

The overflow property controls how extra content is handled inside a box.

Use visible, hidden, scroll, or auto depending on how you want to show or hide extra content.

Choosing the right overflow helps keep your page clean and easy to use.