Autoscrolling text animation in CSS not going all the way

Question

I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:

1. Create a container with fixed dimensions.
2. Place a scrollable container inside and attach the animation.
3. Place the labels.

The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.

Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg

Answer 1

The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.

You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.

Codepen