title: Scrollable div to stick to bottom, when outer div changes in size
body: <p>Here is an example chat app -> </p>
  
  <p><a href="https://i.stack.imgur.com/KtqA4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KtqA4.png" alt=""></a></p>
  
  <p>The idea here is to have the <code>.messages-container</code> take up as much of the screen as it can. Within <code>.messages-container</code>, <code>.scroll</code> holds the list of messages, and in case there are more messages then the size of the screen, scrolls.</p>
  
  <p>Now, consider this case:</p>
  
  <ol>
  <li>The user scrolls to the bottom of the conversation</li>
  <li>The <code>.text-input</code>, dynamically gets bigger</li>
  </ol>
  
  <p>Now, instead of the user staying scrolled to the bottom of the conversation, the text-input increases, and they no longer see the bottom.</p>
  
  <p>One way to fix it, if we are using react, calculate the height of text-input, and if anything changes, let .messages-container know</p>
  
  <pre><code>componentDidUpdate() {
    window.setTimeout(_ =&gt; {
      const newHeight = this.calcHeight();
      if (newHeight !== this._oldHeight) {
        this.props.onResize();
      }
      this._oldHeight = newHeight;
    });
  }
  </code></pre>
  
  <p>But, this causes visible performance issues, and it's sad to be passing messages around like this.</p>
  
  <p>Is there a better way? Could I use css in such a way, to express that when .text-input-increases, I want to essentially <code>shift up</code> all of .messages-container</p>