I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
- Create a container with fixed dimensions.
- Place a scrollable container inside and attach the animation.
- 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
CodePudding user response:
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.