title: Scroll to bottom of an overflowing div in React
body: <p>I have a <code>ul</code> with a <code>max-height</code> and <code>overflow-y: auto</code>.</p>
  
  <p>When the user enters enough <code>li</code> elements, the <code>ul</code> starts to scroll, but I want the last <code>li</code> with the <code>form</code> in it to always be present and viewable to the user.</p>
  
  <p>I've tried implementing a <code>scrollToBottom</code> function that looks like this:</p>
  
  <pre><code>scrollToBottom() {
      this.formLi.scrollIntoView({ behavior: 'smooth' });
  }
  </code></pre>
  
  <p>But that just makes the <code>ul</code> jump to the top of the screen and show the <code>li</code> with the form in it as the only visible thing.</p>
  
  <p>Is there a better way to accomplish this? Answers I find tend to be a bit older and use ReactDOM. Thanks!</p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.prompt-box .options-holder {
      list-style: none;
      padding: 0;
      width: 95%;
      margin: 12px auto;
      max-height: 600px;
      overflow-y: auto;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul className='options-holder'&gt;
      {
          this.state.items.map((item, index) =&gt; (
              &lt;li key={item.id} className={`option ${index === 0 ? 'first' : ''}`}&gt;
                  &lt;div className='circle' onClick={this.removeItem} /&gt;
  
                  &lt;p className='item-text'&gt;{ item.text }&lt;/p&gt;
              &lt;/li&gt;
          ))
      }
  
      &lt;li key={0} className={`option form ${this.state.items.length === 0 ? 'only' : ''}`} ref={el =&gt; (this.formLi = el)}&gt;
          &lt;div className='circle form' /&gt;
  
          &lt;form className='new-item-form' onSubmit={this.handleSubmit}&gt;
              &lt;input 
                  autoFocus 
                  className='new-item-input' 
                  placeholder='Type something and press return...' 
                  onChange={this.handleChange} 
                  value={this.state.text}
                  ref={(input) =&gt; (this.formInput = input)} /&gt;
          &lt;/form&gt;
      &lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>