Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
overflow

9 Articles
Direct link to the article Solving Background Overflow With Inherited Border Radii
background border-radius overflow

Solving Background Overflow With Inherited Border Radii

One of the interesting (but annoying) things about CSS is the background of children’s elements can bleed out of the border radius of the parent element. Here’s an example of a card with an inner element. If the inner element …

Zell Liew on Oct 17, 2024
Direct link to the article Embracing Asymmetrical Design
grid line-clamp overflow text-overflow

Embracing Asymmetrical Design

I’ll never forget one of Karen McGrane’s great lessons to the world: truncation is not a content strategy. The idea is that just clipping off text programmatically is a sledgehammer, and avoids the kind of real thinking and planning that …

Chris Coyier on Sep 20, 2021
Direct link to the article overscroll-behavior
overflow

overscroll-behavior

The overscroll-behavior CSS property controls whether an element will use “scroll chaining” or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of …

Mojtaba Seyedi on Jan 27, 2025
Direct link to the article Using Flexbox and text ellipsis together
ellipsis overflow text-overflow

Using Flexbox and text ellipsis together

You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want …

Chris Coyier on Jul 21, 2020
Direct link to the article A “new direction” in the struggle against rightward scrolling
direction overflow rtl sticky

A “new direction” in the struggle against rightward scrolling

You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the …

Chris Coyier on May 21, 2020
Direct link to the article Overflow And Data Loss In CSS
flexbox grid overflow

Overflow And Data Loss In CSS

“Data Loss” is a funny term. My brain thinks of it like packet loss on the way from the server to your browser, resulting in missing content in files. Perhaps it is that on some level, but in CSS parlance, …

Chris Coyier on Sep 17, 2019
Direct link to the article display: flow-root;
block formatting context flow-root overflow

display: flow-root;

News to me! There is a spec for it and Firefox says they intend to ship it. It’s just like display: block; only:

It always establishes a new block formatting context for its contents.

.group {
  display: flow-root;
}

Meaning: …

Chris Coyier on Feb 26, 2017
Direct link to the article Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
overflow overflow-wrap text wrapping word-break

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

There are times when a really long string of text can overflow the container of a layout.

For example:

URL’s don’t typically have spaces in them, so they are often culprits.

Here’s a big snippet with all the CSS players …

Chris Coyier on Jul 25, 2018
Direct link to the article overflow
overflow scrolling

overflow

The overflow property controls what happens to content that breaks outside of its bounds: 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 …

Sara Cope on Apr 24, 2025

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top