title: how can I make a scrollable component that scrolls to the latest children components automatically when I append a child component?
body: <p>I am building a small chat program in reactjs. What I am going to do is to build a component which renders as a <code>&lt;div&gt;</code> tag dom. And I am appending children components which are also <code>&lt;div&gt;</code> tag doms onto this component. Then if the children components have used all the space of the parent component it should be able to scroll. How to do this in reactjs?</p>
  
  <p>Suppose my child component is this:</p>
  
  <pre><code>class Message extends Component {
      render() {
          return (
                  &lt;div className="message"&gt;
                      &lt;strong&gt;{this.props.user}&lt;/strong&gt;:&amp;nbsp;
                      &lt;span&gt;{this.props.text}&lt;/span&gt;
                  &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>and here is the parent component:</p>
  
  <pre><code>class MessageBoard extends Component {
      render() {
          return (
              &lt;div className={this.props.styleClass}&gt;
                  &lt;h2&gt;{this.props.body}&lt;/h2&gt;
                  {
                      this.props.messages.map((message, i) =&gt; {
                          return (
                                  &lt;Message 
                                      key={i}
                                      user={message.user}
                                      text={message.text}
                                  /&gt;
                              );
                      })
                  }
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>The parent component can't scroll now. Can I just change its css style to make it work properly?</p>