CSS overflow property

Question

I've found some CSS templates where some classes have the overflow:hidden property, but no size defined. If I recall correctly, block elements stretch to fit their content unless otherwise specified. Since this is not the case, I feel that putting the overflow:hidden is pointless and I can delete it without hesitation. Is this right or am I missing something?

score 3 · Accepted Answer · edited May 23 '17 at 10:24

While that's the main purpose of the overflow property, it's not the only effect it has on rendering. The other major effect it has is that setting overflow to anything other than visible (the default) causes a block box to establish its own block formatting context.

This is mainly used to contain floats without the need for a clearfix; however that isn't the only effect of having a new BFC; there are a number of other corner cases that are better described elsewhere in the spec. Also see this lengthy write-up on the reasoning for this behavior (which, oddly enough, has very little to do with containing floats; that actually ends up being nothing more than a side effect).

So if you remove that overflow declaration, you may break float layouts, among other things. I suggest avoiding doing so unless it's absolutely necessary or you're sure it won't affect the layout.

Good answer. In my case there's no child floating element, so I guess it would be safe to remove the declaration. However, I'll let it be just in case I forget why it was there in the first place. — Variax, Sep 27 '12 at 13:10

score 1 · Answer 2 · answered Sep 27 '12 at 12:32

1

If there are floating children inside that div, then overflow: hidden is probably there to contain them.

overflow: hidden creates a new block formatting context, and elements that create new block formatting contexts contain floats.

answered Sep 27 '12 at 12:32

João Paulo Macedo

15,297
4
31
41

score 0 · Answer 3 · answered Sep 27 '12 at 12:32

0

It may depend. if your div contains some floated elements you could use

div {
   height: auto;
   overflow : hidden;
}

as a workaround for the clearing. So I wouldn't delete that rule without seeing the effect on the layout

answered Sep 27 '12 at 12:32

Fabrizio Calderan

120,726
26
164
177

Curtis · Answer 4 · 2012-09-27T12:58:12.877

0

overflow:hidden can come in handy if you have a child element with a width specified which is greater than the container's max allowed width. Otherwise it will stretch the container.

See example

A common use of this is when displaying a carousel, with floated child elements. The elements need to appear inline, but hidden, so that they can come into vision when the left CSS property is changed.

edited Sep 27 '12 at 12:58

answered Sep 27 '12 at 12:33

Curtis

101,612
66
270
352

This was mentioned in the question. The issue is that the stylesheet *doesn't* have a specified width (or height). – BoltClock Sep 27 '12 at 12:42
@BoltClock Perhaps you have misread my answer. I'm referring to a child element, not the actual elements width – Curtis Sep 27 '12 at 12:48
Oops, yeah, that is different. – BoltClock Sep 27 '12 at 12:51
@BoltClock I've updated my answer to make this is a bit clearer – Curtis Sep 27 '12 at 12:58

CSS overflow property

4 Answers4