A Complete Guide To CSS Overflow

What is CSS Overflow?

CSS overflow is when the content overflows from its specified container. This property controls what happens to the content that does not fit in a given area.

The overflow property has the following values:

• visible
• hidden
• scroll
• auto

Let’s see overflow in action with the help of an example.

HTML:

<h1>overflow not set</h1>
  <p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived only five centuries.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
  }

Output:

In the above example, the box has a fixed width and height. However, the text that was placed inside the box is so long that it cannot fit within the box as intended. The extra text you see dropping past the black border is the overflow.

Note: Test CSS Overflow compatibility across 3000+ browser environments. Try TestMu AI Now!

CSS overflow visible

Visible is the default value of CSS overflow. It means that not setting the CSS overflow property is the same as setting it to “visible”.

When overflow is visible, the overflowing content will not be clipped. Instead, it will display outside the element’s box and might overlap other elements on the page.

Let’s see a quick example of overflow visible.

HTML:

<h1>overflow:visible;</h1>
   <p class="box">Lorem Ipsum is simply dummy text of the printing and  typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
    overflow:visible;
  }

Output:

In the above example, the p element with the class name “box” has an overflow property set to visible.

As you can notice, there is no difference between the box from the previous example, which doesn’t have any overflow property, and this box which has an overflow property. This is because the overflow property is set to visible by default.

CSS overflow hidden

Overflow hidden means the overflowing content will be hidden and will not be displayed on the page.

Once a web browser comes across the CSS overflow hidden property, it hides the extra content beyond the element’s box.

Let’s look at an example of overflow hidden.

HTML:

<h1>overflow:hidden;</h1>
    <p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
    overflow: hidden;
  }

Output:

As you can see in the example above, the p element with the class name “box” has an overflow property set to hidden. Because of this value, overflowing content is not visible on the page.

CSS overflow scroll

Setting the overflow value to scroll will hide the overflowing content from rendering outside the element’s box, along with providing scrollbars to view the content.

Note that with setting overflow to scroll, you always get both the horizontal and vertical scrollbars even if the content only requires one or the other.

Let’s look at an example of overflow scroll.

HTML:

<h1>overflow:scroll;</h1>
    <p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
    overflow: scroll;
  }

Output:

As you can see in the example above, the box has the overflow property set to scroll which gives us the scrollbar in the output.

CSS overflow auto

The overflow auto value is almost similar to overflow scroll, in addition it also solves the problem of getting scrollbars even when we don’t need them.

As discussed above, with overflow scroll we get both the horizontal and vertical scrollbar even if we don’t need them. But in case of overflow auto, we get the scrollbar only when the content actually goes outside the element’s box.

Let’s look at an example of overflow auto.

HTML:

<h1>overflow:auto;</h1>
    <p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
    overflow: auto;
  }

Output:

As we can see in the example above, the p element with the class name “box” has the overflow attribute set to auto. Because of that, we only get the horizontal scrollbar since our content only overflows horizontally.

X and Y property of CSS overflow

Till this point, we used the overflow shorthand property to set overflow. Instead, we can also use overflow-x and overflow-y to control the overflow horizontally or vertically.

Overflow-x is used to control the horizontal overflow of an element. In simple terms, it specifies what to do with the right or left edges of the content.

Overflow-y is used to control the vertical overflow of an element. In simple terms, it specifies what to do with the top or bottom edges of the content.

Below is an example of overflow-x and overflow-y properties.

HTML:

<h1>overflow x and y</h1>
    <p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
    overflow-x:scroll;
    /*add horizontal  scrollbar*/
    overflow-y: hidden;
    /*hide vertical scrollbar */
    white-space: nowrap;
  }

Output:

In the example above, we set overflow-x to scroll, because of which, we can scroll right and left. Next, we also set overflow-y to hidden, because of which we can not scroll up and down.

We used a property named “white-space with the value “no-wrap”. This is used to specify how whitespace inside elements is handled. White-space set to no-wrap means the element’s content will not be wrapped to a new line.

CSS overflow wrap

With the use of the overflow-wrap property in CSS, we can tell the browser to break lines of long words in case the content overflows from the element’s box. This helps prevent layout issues caused by overflow from an unusually long string of text.

This property has three values which are:

• normal: this is the default value where the browser will break lines according to its line-breaking rules. Long strings will not break even if they overflow the element’s box.
• break-word: with this value, words or strings of characters too long to fit inside their container will split at random points, causing a line break.
• inherit: this will inherit the value of the overflow-wrap attribute, which was set on the targeted element’s immediate parent.

Below is an example of overflow-wrap.

HTML:

<h1>overflow-wrap</h1>
    <p class="box">This element contains a very long word: thisisaveryveryveryveryveryverylongword. By default, the long word will not break and wrap to the next line. With break-word, the long word will break.</p>

CSS:

body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    margin: 0 auto;
    background-color:yellow;
    overflow-wrap: break-word;/*try removing the overflow-wrap to see the difference*/
  }

Output:

In the above example, we can see that the box has the overflow-property set to break-word, which breaks the long string of characters and wraps them to the next line, ensuring that our content does not overflow from the container. However, if we do not specify the property, the long words will not break, and it will overflow the container.