score:8

Accepted answer

To achieve that you want to implicitly set height of the parent-div and set overflow-y: scroll like this:

.parentDiv {
    height: 300px;
    overflow-y: scroll;
}

How to scroll to the last child element?

To achieve that you could refactor your MessageBoard component like this:

class MessageBoard extends Component {
    render() {
        return (
            <div ref={function (element){
                if (element) {
                    this.messagesContainer = element;
                }
                let lastIndex = this.messagesContainer.length - 1;
                this.messagesContainer[lastIndex].scrollIntoView();
            }.bind(this)} ..>
                ...
            </div>
        );
    }
}

What we do here?

We set ref attribute using callback function that will be invoked right after component's been mounted into DOM and (if set on HTML element) on every update.

Callback function gets one parameter (in case of HTML element it is an actual DOM node reference) which we save in a separate variable (because parameter may be null on next call) then we get the last children of the component using the variable and invoke a native scrollIntoView() to scroll the parent to the bottom.


Related Query

More Query from same tag