justify-content: space-evenly safe; appears to work here with flex because the value is not actually working:<br>
<br>
<div class="
  justify-evenly-safe
  flex flex-row gap-6
  overflow-x-auto
">
  <img src="https://picsum.photos/150/450?1" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?2" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?3" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?4" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?5" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?6" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?7" alt="tall placeholder image">
</div>
<br>
<span>Same code, fewer columns, you can see it's not spacing evenly</span><br>
<br>
<div class="
  justify-evenly-safe
  flex flex-row gap-6
  overflow-x-auto
">
  <img src="https://picsum.photos/150/450?1" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?2" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?3" alt="tall placeholder image">
</div>
<br>
In the future, that ^ should work.<br>
<br>
<br>
BUUUT to demonstrate the hack one more time, with flex now:<br>
<br>
<div class="
  justify-evenly-until-scroll
  flex flex-row gap-6
  overflow-x-auto
">
  <img src="https://picsum.photos/150/450?1" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?2" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?3" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?4" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?5" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?6" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?7" alt="tall placeholder image">
</div>
<br>
<span>Same code, fewer columns, and we have what we wanted:</span><br>
<br>
<div class="
  justify-evenly-until-scroll
  flex flex-row gap-6
  overflow-x-auto
">
  <img src="https://picsum.photos/150/450?1" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?2" alt="tall placeholder image">
  <img src="https://picsum.photos/150/450?3" alt="tall placeholder image">
</div>
<br>
<br>

<p>
  When `justify-content: space-evenly;` overflows, the items overflow from a `justify-content: centered;` position and you cannot scroll to reveal the overflow on the left.<br>
  <br>
  This CodePen is <a href="https://dev.to/janeori/css-fix-when-justify-content-space-evenly-overflows-un-center-the-content-4l50">an excerpt from this article explaining how to fix it in 100% CSS</a>.<br>
  <br>
  Based on <a href="https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/">a useful Space Toggle created by Bramus in this article</a>.
</p>

<style>
  .justify-evenly-safe {
    justify-content: space-evenly safe;
  }
  .flex { display: flex; }
  .flex-row { flex-direction: row; }
  .gap-6 { gap: 1.5rem; }
  .overflow-x-auto { overflow-x: auto; }
</style>

@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);
}