[CSS Fix] When justify-content: space-evenly overflows, un-center the content
Tags: css, howtofix, webdev, tutorial
Published: 2023-09-26 14:42:27

Bramus has shown us a clever scroll animation based [Space Toggle](https://github.com/propjockey/css-sweeper#basics-of-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)

{% codepen https://codepen.io/propjockey/pen/2efa1cfd97260f464e111f1104ee239d default-tab=result theme-id=40148 %}

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

{% codepen https://codepen.io/propjockey/pen/2a57fee9c51d8d2a1711b0a6dadeb1ac default-tab=result theme-id=40148 %}

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](https://stackoverflow.com/questions/67111711/how-not-to-overflow-on-the-left-when-using-justify-content-space-evenly/67115137#67115137) explaining the 'why':

> I found the [CSS specs](https://www.w3.org/TR/css-align-3/#distribution-values) 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.](https://jsfiddle.net/oL7yke6g/)
> 
> author: [Paul](https://stackoverflow.com/users/2290493/paul)

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

It starts [in this article from Bramus](
https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/), then adapting his Space Toggle into our solution, we create a class to replace `.justify-evenly` here:

```css
@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:

{% codepen https://codepen.io/propjockey/pen/9b20183c3a6daa1c426c568777a50d3a default-tab=result theme-id=40148 %}

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](https://codepen.io/propjockey), and [on X](https://twitter.com/Jane0ri) 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   |
| --- | --- | --- | --- | --- |
| [![PropJockey.io](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/propjockey-lines.svg)](https://propjockey.io) | [![CodePen](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/codepen.svg)](https://codepen.io/propjockey) | [![DEV Blog](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/dev.svg)](https://dev.to/janeori) | [![GitHub](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/github.svg)](https://github.com/propjockey) | [![X](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/x.svg)](https://x.com/jane0ri) |

---

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.

{% codepen https://codepen.io/propjockey/pen/bGOMgjy default-tab=result theme-id=40148 %}

Thank you!