Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.<\/p>\n

There are four values for the overflow property: visible<\/strong> (default), hidden<\/strong>, scroll<\/strong>, and auto<\/strong>. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.<\/p>\n

Let’s take a look at each and then discuss some common uses and quirks.<\/p>\n

<\/p>\n

Visible<\/h3>\n

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.<\/p>\n

<\/p>\n

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:<\/p>\n

<\/p>\n

Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.<\/p>\n

Hidden<\/h3>\n

The opposite of the default visible is hidden<\/strong>. This literally hides any content that extends beyond the box.<\/p>\n

<\/p>\n

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. <\/p>\n

Scroll<\/h3>\n

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.<\/p>\n

<\/p>\n

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.<\/p>\n

Auto<\/h3>\n

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them. <\/p>\n

<\/p>\n

Float Clearing<\/h3>\n

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at<\/em> the element, it self-clears<\/em>. This means that the element with overflow applied (auto<\/strong> or hidden<\/strong>), 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:<\/p>\n

<\/p>\n

There is more detail about this and floats in general in the article All About Floats<\/a>.<\/p>\n

Cross Browser Concerns<\/h3>\n

Like most things in CSS, there are plenty of cross-browser quirks with overflow. Here they are:<\/p>\n

Scroll bars inside or outside of box?<\/h4>\n

Firefox puts them outside, IE puts them inside. I believe only IE actually gets this correct (it should be inside).
\n
\nMake sure to account for this substantial difference.<\/p>\n

IE 8 expanding box bug<\/h4>\n

There are lots of fun new bugs, including some very serious ones that hide entire web pages, with IE. More details here<\/a>.<\/p>\n

Breaking floated layouts<\/h4>\n

IE 6, 7 and 8 all screw up the default overflow visible and will expand a box horizontally to fit content (likely an image). This is especially painful for layouts built on floated columns, and a single expanded column can push other columns down and cause some pretty seriously borked layouts.<\/p>\n

<\/p>\n

Can scroll bars be styled with CSS?<\/h3>\n

IE used to allow this<\/a> in older versions of IE but it has since been discontinued. WebKit\/Blink browsers allow it and here’s some information about that<\/a>. It’s non-standard though and it’s unclear if the standards bodies are interested in standardizing it. If you absolutely need customized cross-browser scrollbars, you’ll need to handle it custom with JavaScript. Here’s a simple start<\/a> and here’s a StackOverflow thread<\/a> with recommendations.<\/p>\n

IE Trick<\/h3>\n

IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice for preventing horizontal jumps<\/a>, but isn’t always desirable. To remove this in IE, you can set overflow to auto on the body element.<\/p>\n

Demo<\/h3>\n

Demos for this article taken from this sample page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-2833","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":374894,"url":"https:\/\/css-tricks.com\/a-couple-changes-coming-in-chrome-108\/","url_meta":{"origin":2833,"position":0},"title":"A Couple Changes Coming in Chrome 108","author":"Geoff Graham","date":"November 4, 2022","format":false,"excerpt":"\"A change to overflow on replaced elements in CSS\": From Chrome 108, the following replaced elements respect the overflow property:\u00a0img,\u00a0video\u00a0and\u00a0canvas. In earlier versions of Chrome, this property was ignored on these elements.This means that an image which was earlier clipped to its content box can now draw outside those bounds\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/chrome-browser-extension-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/chrome-browser-extension-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/chrome-browser-extension-blueprint.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/chrome-browser-extension-blueprint.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/chrome-browser-extension-blueprint.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":292383,"url":"https:\/\/css-tricks.com\/multi-line-truncation-with-pure-css\/","url_meta":{"origin":2833,"position":1},"title":"Multi-Line Truncation with Pure CSS","author":"Chris Coyier","date":"July 17, 2019","format":false,"excerpt":"The trick in this article is still pretty neat and clever, but there is a now-standardized way to do this which is probably your best bet. Truncating a single line of text if is fairly straightforward. Truncating multiple lines is a bit harder. Using just CSS (no JavaScript or server-side\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/line-clamp.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/line-clamp.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/line-clamp.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/line-clamp.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/line-clamp.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":323600,"url":"https:\/\/css-tricks.com\/comparing-various-ways-to-hide-things-in-css\/","url_meta":{"origin":2833,"position":2},"title":"Comparing Various Ways to Hide Things in CSS","author":"Marko Ilic","date":"October 27, 2020","format":false,"excerpt":"You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique. Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn\u2019t bulletproof because now that content is now\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/magic-stage-hiding-elements.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/magic-stage-hiding-elements.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/magic-stage-hiding-elements.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/magic-stage-hiding-elements.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/magic-stage-hiding-elements.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":273207,"url":"https:\/\/css-tricks.com\/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps\/","url_meta":{"origin":2833,"position":3},"title":"CSS Grid in IE: Faking an Auto-Placement Grid with Gaps","author":"Daniel Tonon","date":"July 6, 2018","format":false,"excerpt":"This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane. In Part 1, I covered some of the common misconceptions that people have about IE11\u2019s native CSS grid implementation. In Part 2, I showed the world\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":21560,"url":"https:\/\/css-tricks.com\/line-clampin\/","url_meta":{"origin":2833,"position":4},"title":"Line Clampin’ (Truncating Multiple Line Text)","author":"Chris Coyier","date":"May 7, 2013","format":false,"excerpt":"You want X lines of text. Anything after that: gracefully cut off. That's \"line clamping\" and it is a perfectly legit desire. When you can count on the text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":255404,"url":"https:\/\/css-tricks.com\/aspect-ratio-boxes\/","url_meta":{"origin":2833,"position":5},"title":"Aspect Ratio Boxes","author":"Chris Coyier","date":"June 8, 2017","format":false,"excerpt":"I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/bad-design-territory.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/bad-design-territory.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/bad-design-territory.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/bad-design-territory.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/bad-design-territory.png?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2833"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2833\/revisions"}],"predecessor-version":[{"id":145860,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2833\/revisions\/145860"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=2833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}