0
0
CSSmarkup~5 mins

Hidden, scroll, auto in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

These CSS values control how extra content inside a box is shown. They help keep your page neat and easy to use.

When you want to hide extra content that doesn't fit in a box.
When you want to let users scroll to see hidden content.
When you want the browser to decide if scrolling is needed or not.
When you want to avoid content spilling outside its container.
When you want to create a clean, scrollable area on your page.
Syntax
CSS
overflow: hidden | scroll | auto;

hidden hides extra content without scrollbars.

scroll always shows scrollbars, even if not needed.

auto shows scrollbars only if content is too big.

Examples
Extra content is hidden and no scrollbars appear.
CSS
overflow: hidden;
Scrollbars always show, letting users scroll even if not needed.
CSS
overflow: scroll;
Scrollbars appear only if content is bigger than the box.
CSS
overflow: auto;
Sample Program

This page shows three boxes with the same content but different overflow settings. You can try to scroll inside each box or use keyboard focus (Tab key) to see how scrollbars behave.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Example</title>
<style>
  .box {
    width: 15rem;
    height: 7rem;
    border: 2px solid #333;
    margin: 1rem;
    padding: 0.5rem;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }
  .hidden {
    overflow: hidden;
    background-color: #f8d7da;
  }
  .scroll {
    overflow: scroll;
    background-color: #d1ecf1;
  }
  .auto {
    overflow: auto;
    background-color: #d4edda;
  }
</style>
</head>
<body>
  <h1>Overflow: hidden, scroll, auto</h1>
  <section>
    <article class="box hidden" tabindex="0" aria-label="Box with overflow hidden">
      <strong>Hidden:</strong> Extra text is cut off and no scrollbars appear. Try to scroll here.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </article>
    <article class="box scroll" tabindex="0" aria-label="Box with overflow scroll">
      <strong>Scroll:</strong> Scrollbars always show, even if not needed.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </article>
    <article class="box auto" tabindex="0" aria-label="Box with overflow auto">
      <strong>Auto:</strong> Scrollbars appear only if content is too big.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </article>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use tabindex="0" on scrollable boxes to allow keyboard users to focus and scroll them.

Scrollbars look different on each operating system and browser.

For horizontal and vertical control separately, use overflow-x and overflow-y.

Summary

hidden hides extra content with no scrollbars.

scroll always shows scrollbars.

auto shows scrollbars only when needed.