I have faced the same problem while building a chatting app. Here is how I fixed it:
-for my flex-repeater that shows the messages based on their timestamps, I used a column flex repeater with direction prop set to "column-reverse" and justify: "flex-start". Then I queried my chat messages using "ORDER BY timestamp desc" and that always automatically scrolled to the latest message between the users. I found that answer on stackoverflow:
When an overflow occur to the left (or top), a scroll doesn't get rendered, and the reason is that a HTML document's normal flow is left-to-right (top-to-bottom).
Flexbox has a row-reverse direction, which will solve that, thought 2 things comes with that:
- One need to reorder the items or use an inner wrapper
- I.a. Firefox and Edge doesn't show the scroll (possible bug)
link to stack overflow auto scroll
here is a screenshot of my flex-repeater props:
