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

Bramus has shown us a clever scroll animation based Space Toggle 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 columns with overflow-x: auto; and the same code as shown previously:

At least 1.7 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 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

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

It starts in this article from Bramus, then adapting his Space Toggle 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);
}

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!

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, and on X as well!

👽💜
// Jane Ori

---

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

https://linkedin.com/in/JaneOri

Over 13 years 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 (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 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!

Comments

[Šime Vidas]

I found the CSS 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.

If it’s center for space-evenly, then why is only the left side of the scroll container cut off? Shouldn’t both edges be cut off equally?

[Jane Ori]

Only because scrollbars cannot scroll to negative scroll positions, and overflow only computes the positive overflow.

Also, both edges do cut off evenly, if you remove the overflow-x-auto class in my 2nd codepen above, you will see the 7 column layout clipping ~1.7 columns on both sides

Thank you for asking questions!

[Šime Vidas]

So the gap property skews space-evenly, huh? The spaces are no longer even because the gap is only added between the items. Then why use space-evenly with gap to begin with?

[Jane Ori]

Hm, think of gap as a minimum, space-evenly makes the gap (and, effectively, the container's padding left and right) bigger to make sure the content is centered, evenly.

If there is enough room (like in the first 3 column codepen), then gap can be removed and the output is exactly the same.

Does that help clarify?