Scroll to bottom

This demo shows a scroller that is always scrolled to the bottom, even when (dynamic) data is added. This method requires no Javascript, as it works using CSS' flex system.

What makes this especially great, is that it keeps the scroll position if the user has scrolled (up) and data is added, preventing annoying content jumps. Try it out yourself below.

See my answer on Stackoverflow for more info.

Demo

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

Breakdown

The trick is to add the items to an item container which is inside a scroller container with display:flex, flex-direction: column-reverse and overflow: scroll (or auto) set.