Grow your CSS skills. Land your dream job.

overflow

Last updated on:

div {
  overflow:  visible | hidden | scroll | auto | inherit
}

View Demo

The overflow property controls what happens to content that breaks outside of its bounds. The default value is visible. So imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible. Where if you set the overflow value to hidden, the image will cut off at 200px.

Remember that text will naturally wrap at the end of an element (unless white-space is changed) so text will rarely be the cause of overflow. Unless a height is set, text will just push an element taller as well. Overflow comes into play more commonly when explicit widths and heights are set and it would be undesirable for any content to spill out, or when scrolling is explicitly being avoided.

Visible

If you don't set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are over-riding it from being set elsewhere.

The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:

Generally, you shouldn't be setting static heights on boxes with web text in them anyway, so it shouldn't come up.

Hidden

The opposite of the default visible is hidden. This literally hides any content that extends beyond the box.

This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source). So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.

Scroll

Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.

Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.

Note: In OS X Lion, when scrollbars are set to only show when being used, scroll behaves more like auto, in that only needed scrollbars will show up.

Auto

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don't need them. The scrollbars will only show up if there is content that actually breaks out of the element.

Float Clearing

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow (any value except visible) will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared. Like this:

A better float clearing technique is the clearfix, as it doesn't require you to alter the overflow property in a way you don't need.

Can scrollbars be styled with CSS?

You used to be able to style scrollbars in IE (v5.5?) but no more. You can style them now again in WebKit browsers. If you need cross-browser custom scrollbars, look to JavaScript.

Demo

Demos for this article taken from this sample page.

Browser Support

If an element needs to have scrollbars appended to honor the overflow value, Firefox puts them outside the element, keeping the visible width/height as declared. IE puts the scrollbars inside, keeping the overall width/height as declared.

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works ? 5+

To get native momentem scrolling on iOS 5+, you'll need:

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Comments

  1. Good stuff… but I want to mention “overflow-x” and “overflow-y” CSS properties. These come in handy sometimes!

  2. Really helpful, Thank you :D

  3. mohammedakmal
    Permalink to comment#

    Hi, in android os, overflow: scroll; -webkit-overflow-scrolling: touch; not supported

  4. Sumit Gera
    Permalink to comment#

    Hello, I appreciate your effort! But I have been dealing with a problem. I have a five set of images in slideshow inside a div element and the layout of the webpage is properly fluid. Using overflow on the div element either adds scrollbars to the div element or cuts the image (which looks very awkward). Please suggest me something so that the image doesn’t overflow.

  5. OMG, I wanna have your baby. I’ve been farting with this no scrollbar problem in IE9 for four hours now and your solution to take out overflow: visible and let the browser default to the scroll bars was positively bril. Thank you!

  6. That is the big “stretch” these con artists are selling.

  7. Chris,

    Any idea if this is possible when the container element does not have a fixed width? In other words, where the wrapper is not explicitly set but is instead defined by the page wrapper or body? (In other words, ‘100%’)

    I want to create a scrollable subnavigation that can have a width as large as the viewport of a mobile device and may adapt depending on screen orientation.

  8. JRMLSTF
    Permalink to comment#

    I needed to use overflow-x: hidden and overflow-y: auto to remove the scrollbars in Chrome Android and unfortunately it also removes momentum scroll in Safari iOs. I add -webkit-overflow-scrolling: touch and Safari iOs get momentum scroll back. It’s so great, it saved me hours and hours, thank you Chris !

  9. Balakrishna Gajam
    Permalink to comment#

    nice artical…..

  10. Shubhra
    Permalink to comment#

    In the first case where I don’t want the image to stick out of the div and be visible The overflow: hidden doesn’t work for safari. Do you know a work around it? I read that safari has a bug with position and overflow. I took out position complete still it gives me the same issue can you please suggest any work around that you may have for Safari

    example code:

    .box {
        width: 200px;
        position: relative;
        overflow: hidden;
        height: 350px;
        margin: 53px 29px 10px 29px;
        background-image: url(../images/backgroundcardboard.png);
        background-repeat: repeat;
        -webkit-box-shadow: 0 0 5px 1px #888;
        box-shadow: 0 0 5px 1px #888;
        border-radius: 10px;
        z-index: 2;
    }
    
  11. Kim
    Permalink to comment#

    Is there any idea how to make a position fixed object able to scroll within its container inside mobile?

  12. Permalink to comment#

    NOTE: you cannot use overflow:auto or overflow:scroll on a <fieldset> tag, in Firefox at least. The same likely applies in other browsers. Stick your overflow CSS on a <div> instead.

    • Damian
      Permalink to comment#

      My experience is that you can but why would you want to… The point of a fieldset I would think is to use in conjuration with a legend at which point if you did scroll your legend will be overlapping onto your text and looking bad. I agree with you that using overflow options in that scenario should be used on a div within the fieldset, and if you are not going to use a legend then use a div with a border instead of a fieldset.

    • Permalink to comment#

      Yeah, it wouldn’t necessarily be a good idea in the first place. I just wanted to document this here, as it took a bit of head scratching to figure out what was going on, and I didn’t want others to make the same mistake.

      Of course, similar things can happen for <td> tags… i.e. there are some style rules that don’t work on certain tags (at all, or as expected, or behave differently in different browsers), in which case wrapping a <div> on the inside and styling it instead, is often the easiest solution.

  13. Permalink to comment#

    Much informative.. I will surely appreciate the simple language explanation of complex techie stuff..

  14. ayo
    Permalink to comment#

    Isnt there a way in which the image from the example above scales down perfectly in size to fit the specified width of the container, just as the case of a responsive image sort of, with any part of it been cut off.

    • Damian
      Permalink to comment#

      If it is a background image you can set the size to contain

      #element {
          background: url(images/your_image.png) no-repeat center center;
          background-size: contain;
      }
      
    • Ralph Trinidad

      … and if its an element, simply use the max-width: 100%; declaration.

  15. Great!!! IT helped me..

  16. Thanks for writing this!

    Quick question, I’m using static heights and widths to make big clickable boxes on a responsive design. I set the properties to relative positioning with overflow hidden so that they align well, but in safari overflow hidden doesn’t work. Any ideas on making it work?

    Meanwhile I’ll be using the clear fix you recommended and floating the elements. Thanks!

  17. Terf
    Permalink to comment#

    To remove the horizontal scrollbars when you don’t need them, I think you can do overflow-y: scroll; overflow-x: hidden;
    It leaves the vertical scrollbars while taking out the horizontal ones

  18. Priyanga

    How to change the scrollbars color?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".