CSS Overflow

By /

In this chapter, you will learn what happens when the content inside an element is too large for the available space. CSS provides the overflow property to control what happens in this situation. Let’s understand the different CSS overflow values step by step.

What is CSS Overflow?

Overflow happens when the content inside an element does not fit within its set width or height. For example, imagine a box with a fixed height. If there is too much text inside it, the content may go outside the box. The overflow property helps you control what happens to that extra content.

The most commonly used values are:

  • visible
  • hidden
  • scroll
  • auto

1. Overflow: Visible

The default value of the overflow property is visible. This means that extra content can appear outside the element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Overflow Visible</title>

  <style>
    .box {
      width: 300px;
      height: 80px;
      background-color: lightblue;
      border: 2px solid blue;
      overflow: visible;
    }
  </style>
</head>

<body>

  <div class="box">
    This is a box with a fixed height. If the content is too large
    to fit inside the box, it will continue outside the box because
    the overflow value is set to visible.
  </div>

</body>
</html>

The extra text will continue outside the box. Since visible is the default value, you usually do not need to write it unless you specifically want to make it clear in your CSS.

2. Overflow: Hidden

The hidden value hides any content that goes outside the element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Overflow Hidden</title>

  <style>
    .box {
      width: 300px;
      height: 80px;
      background-color: lightgreen;
      border: 2px solid green;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div class="box">
    This is a box with a fixed height. The extra content will be hidden
    if it does not fit inside the available space.
  </div>

</body>
</html>

The content that does not fit inside the box will not be visible. Be careful when using hidden because users may not be able to see the hidden content.

3. Overflow: Scroll

The scroll value adds scrollbars to an element. This allows the user to scroll and see the extra content.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Overflow Scroll</title>

  <style>
    .box {
      width: 300px;
      height: 100px;
      background-color: lightyellow;
      border: 2px solid orange;
      overflow: scroll;
    }
  </style>
</head>

<body>

  <div class="box">
    This box has a fixed height and width. If there is more content
    than the available space, you can use the scrollbar to view it.
    Keep scrolling to read the remaining content inside this box.
  </div>

</body>
</html>

You will see a scrollbar inside the box. The scrollbar allows you to move through the hidden content.

4. Overflow: Auto

The auto value adds a scrollbar only when it is needed.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Overflow Auto</title>

  <style>
    .box {
      width: 300px;
      height: 100px;
      background-color: lightpink;
      border: 2px solid red;
      overflow: auto;
    }
  </style>
</head>

<body>

  <div class="box">
    This box uses overflow auto. A scrollbar will appear only when
    the content is larger than the available space. If all the content
    fits inside the box, no scrollbar is needed.
  </div>

</body>
</html>

The auto value is useful because it keeps the element clean when a scrollbar is not needed.

Overflow on One Direction

You can also control horizontal and vertical overflow separately. CSS provides:

overflow-x
overflow-y

Horizontal Overflow

The overflow-x property controls content that overflows horizontally. For example:

.box {
  overflow-x: scroll;
}

Vertical Overflow

The overflow-y property controls content that overflows vertically. For example:

.box {
  overflow-y: scroll;
}

This is useful when you want to control scrolling in only one direction.

A Simple Example with Vertical Scrolling

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Scroll</title>

  <style>
    .box {
      width: 300px;
      height: 120px;
      background-color: lightblue;
      border: 2px solid blue;
      padding: 10px;
      overflow-y: auto;
    }
  </style>
</head>

<body>

  <div class="box">
    <p>HTML is used to create the structure of a web page.</p>
    <p>CSS is used to style and design the web page.</p>
    <p>JavaScript is used to add interactivity to a web page.</p>
    <p>Keep scrolling to see all the content inside this box.</p>
  </div>

</body>
</html>

When the content becomes larger than the available height, you can scroll vertically inside the box.

Quick Recap

  • Overflow happens when content does not fit inside an element.
  • visible allows content to appear outside the element.
  • hidden hides extra content.
  • scroll adds scrollbars.
  • auto adds scrollbars only when needed.
  • overflow-x controls horizontal overflow.
  • overflow-y controls vertical overflow.

Frequently Asked Questions (FAQs)

Q1. What is CSS Overflow?

CSS Overflow controls what happens when content inside an HTML element is larger than the available space.

Q2. What are the different values of the CSS overflow property?

The most common values are visible, hidden, scroll, and auto.

Q3. What does overflow hidden do in CSS?

overflow: hidden hides any content that extends outside the boundaries of an element.

Q4. What is the difference between overflow scroll and auto in CSS?

overflow: scroll adds scrollbars, while overflow: auto adds scrollbars only when the content does not fit inside the available space.

Q5. How do I add a scrollbar using CSS overflow?

You can use the CSS overflow property to allow scrolling when content is larger than the width or height of an element.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top