[CSS Fix] When justify-content: space-evenly overflows, un-center the content

By admin

Bramus
PRODUCT

has shown us a clever scroll animation based

Space Toggle
ORG

that allows our styles to respond based on weather the element can scroll or not.

https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/

Pop over there to see how it works, continue here to see how I’ve used it ~

When we use space-evenly

When content spans the full width of your page in columns, like itineraries, house banners, etc,

justify-content: space-evenly; is subjectively the best looking layout for it.

(that’s . justify-evenly if you tailwind)

What space-evenly breaks

If a column section is set to space-evenly but the code allows more columns to be added and scrolled horizontally, you’d probably expect overflow-x: auto; to do it well.

Here’s

7
CARDINAL

columns with overflow-x: auto; and the same code as shown previously:


At least 1.7
CARDINAL

columns are totally inaccessible, scrolled off to the left in the unreachable negative scroll positions.

Why space-evenly breaks on overflow

This answer on stackoverflow does a great job explaining the ‘why’:

I found the

CSS
ORG

specs describe a "fallback alignment" in case the spacing cannot be applied. For space-between this is start whereas for space-evenly this is center, unfortunately. This explains the observed overlap difference. Nevertheless, the spec also mentions A future level of this module may allow the fallback alignment to be specified explicitly. so perhaps with time we may be able to set the fallback to start. Until that time I’ve found a workaround: set min-width on the container. To avoid excessive width, wrap the container in a scrolling parent element. Demo here. author:

Paul

PERSON

Where is the CSS-Only fix to space-evenly overflows?!

It starts in this article from

Bramus
PRODUCT

, then adapting his

Space Toggle
ORG

into our solution, we create a class to replace .justify-evenly here:

@keyframes detect-scroll { from , to { –can-scroll : ; } } .justify-evenly-until-scroll { –start-if-can-scroll : var ( –can-scroll ) start ; justify-content : var ( –start-if-can-scroll , space-evenly ); animation : detect-scroll linear ; animation-timeline : scroll ( self inline ); } Enter fullscreen mode

Exit
PRODUCT

fullscreen mode

Making a note here, huge success – and we added inline to the animation-timeline: scroll(self inline) to make it respond to horizontal scroll instead.

Swap .justify-evenly in the html with our new .justify-evenly-until-scroll and you get:


Hooray
PERSON

!

Who am I?

If you think this is useful, fun, or interesting, it’s the kind of thing I do in my free time! So please do consider following me here, on

CodePen
ORG

, and on X as well!

👽💜

//

Jane Ori

PERSON

PS: I’ve been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over

13 years
DATE

of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

PropJockey.io CodePen DEV Blog GitHub X

UPDATE:

Wait? Nope! Continue, but, heads up:


Bramus
PRODUCT

(and someone privately) informed me of a new feature with a slight superset of browser support over animation scroll():

justify-content’s safe keyword

https://drafts.csswg.org/css-align-3/#overflow-values

It currently works with justify-content: center safe; but if you specifically want space-evenly (I do!), this hack is currently the only working solution.

All the previous demos use grid, here it is with flex,

first
ORDINAL

using space-evenly safe which doesn’t do anything yet. Then, further down, same hack as used on the grid demos above, also works on flex.

Thank you!