Overflow In CSS

Ahmad Shadeed is at it again(*), this time with a guide on Overflow in CSS:

In CSS, we can have control over an element when its content is too big to fit in. The property for that is overflow, which is a shorthand for overflow-x and overflow-y properties.

For this article, I will give an introduction to those properties, and then we will dive together into some concepts and use-cases that are related to overflow. Are you ready? Let’s dive in!

Overflow In CSS →

💁‍♂️ Again? Check out his guide on Viewport Units which also was amazingly detailed and complete.

Typical display: flow-root; use case

Good display: flow-root; use case by Paul Bakaus:

flow-root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image.

In the image above you can see that the <ul>‘s bounding box appears behind the floated element, thus rendering the list bullets above/behind said image.

The fix is to create a new block formatting context, which is exactly what display: flow-root; affords.

💁‍♂️ What is this “new block formatting context” exactly? As per spec:

The bounding box of an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

In the past, one would’ve used overflow: hidden; to achieve the same result.

Check out this Pen!

However, as browser support for display: flow-root; is still lacking (Firefox 53, Opera 45, and Chrome 58 are the only browsers that support it) we’ll have to stick to the overflow: hidden; method for a little while longer …

Block formatting contexts and lists →

Establishing a new block formatting context using overflow: hidden;

Today Vasilis tweeted a link to a very nice (and old, apparently) CSS trick:

Overflow does some cool things you should know about.

  1. Creates Block Formatting Context
  2. Clears Floats

The second feature I did know, the first I didn’t.

The bounding box of an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

Embedded below is an example with an img, adjacent to a div (recognisable by its grey background color), which is being left floated. The div in the second example has overflow: hidden; applied to it. The one in the first example hasn’t:

Check out this Pen!

Neat, really neat.

Overflow – a secret benefit →

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)