overflow Archives | CSS-Tricks

Link May 21, 2020

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 body to fix that, but that can sometimes wreck stuff like position: sticky;.

Well, you know how if you place an element off the left edge of a browser window, it doesn’t do that? That’s “data loss” and just … Read article “A “new direction” in the struggle against rightward scrolling”

Our Notes / Read at cloudfour.com

Link September 17, 2019

Overflow And Data Loss In CSS

Shared by

Chris Coyier

“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, it has to do with the overflow property. Too much content for sized container + hidden overflow = data loss.

But it isn’t only overflow that can cause this “data loss.” Alignment can cause data loss too. Imagine flexbox or … Read article “Overflow And Data Loss In CSS”

Our Notes / Read at www.smashingmagazine.com

flexbox grid overflow

Almanac March 14, 2019

overscroll-behavior

Author

Chris Coyier

3 Comments

Join Conversation

The overscroll-behavior property in CSS 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 an element that has it’s own scrolling (say it’s vertical) and you have scrolled down to the bottom of it, then by default, the next parent element up (maybe the page itself) starts to scroll in that direction. If … Read article “overscroll-behavior”

overflow

Link December 30, 2016

display: flow-root;

Shared by

Chris Coyier

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: you don’t have to use clearfix hacks. There is a bit more to it though. Fiona Chan has a mini-talk all about block formatting context. I think it affects z-index and transforms in some cases too. Anybody?

I suspect Nicole … Read article “display: flow-root;”

Our Notes / Read at groups.google.com

block formatting context flow-root overflow

Snippet January 30, 2012

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

Author

Chris Coyier

65 Comments

Join Conversation

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 involved:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard

… Read article

overflow overflow-wrap text wrapping word-break