Attempting to create a simple instant messaging interface using flexbox, where incoming messages are displayed at the bottom and push older messages upwards has been a challenge.
Struggling to find an elegant solution to ensure new elements always appear at the very bottom.
A demonstration of the issue can be found in this fiddle I created: https://jsfiddle.net/jensmtg/1fob3mat/
The best approach so far involves assigning new messages a decreasing css order value as they arrive, but is there a more efficient method to achieve this?