CODEWITHSUNDEEP
cssoverflow
Variax
Variax

Reputation: 1057

CSS overflow property

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?

Upvotes: 0

Views: 100

Answers (4)

BoltClock
BoltClock

Reputation: 723538

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.

Upvotes: 3

Curtis
Curtis

Reputation: 103348

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.

Upvotes: 0

Paulo R.
Paulo R.

Reputation: 15609

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.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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

Upvotes: 0

Related Questions