title: React scroll component to view inside overflow hidden element
body: <p>I have a list which contains a series of items, but I can't get it to scroll another item into view. Solutions such as <a href="https://stackoverflow.com/a/50097971/577875">this</a> doesn't quite work, because I have to scroll up and down (basically if the list is too large, scroll it at intervals to display all items).</p>
  
  <p>I made a <a href="https://codesandbox.io/s/x2ljwxv6pp" rel="nofollow noreferrer">codepen</a> that illustrates the problem with react-scroll-to-component, but I am open to any library / native solution. The basic functionality is just <code>scrollToComponent(ref, &lt;options&gt;)</code>. </p>
  
  <p>The error as far as I can tell is that it attempts to scroll on the body, rather than the actual container. If you remove the height / overflow properties of the div, it will work.</p>
  
  <p>Doesn't work:</p>
  
  <pre><code>&lt;div
      style={{
      height: `200px`,
      overflow: "hidden"
      }}
  &gt;
      {this.state.items.map(item =&gt; (
      &lt;Item ref={inst =&gt; (this[`ref_${item}`] = inst)} item={item} /&gt;
      ))}
  &lt;/div&gt;
  </code></pre>
  
  <p>Works:</p>
  
  <pre><code>&lt;div&gt;
      {this.state.items.map(item =&gt; (
      &lt;Item ref={inst =&gt; (this[`ref_${item}`] = inst)} item={item} /&gt;
      ))}
  &lt;/div&gt;
  </code></pre>
  
  <p>Full code for anyone not wanting to go to codepen:</p>
  
  <pre><code>class Item extends React.Component {
    render() {
      return &lt;div style={{ padding: `12px` }}&gt;Item {this.props.item}&lt;/div&gt;;
    }
  }
  
  class List extends React.Component {
    state = {
      items: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20
      ]
    };
  
    componendDidMount() {
      this.state.items.forEach(item =&gt; (this[`ref_${item}`] = React.createRef()));
    }
  
    onClick = () =&gt; {
      scrollToComponent(this.ref_20);
    };
  
    render() {
      const { items } = this.state;
      return (
        &lt;div&gt;
          &lt;h1&gt;My List&lt;/h1&gt;
          &lt;button onClick={this.onClick}&gt;Clickidy&lt;/button&gt;
          {/*Replace with &lt;div&gt; to see it work*/}
          &lt;div
            style={{
              height: `200px`,
              overflow: "hidden",
              backgroundColor: "red"
            }}
          &gt;
            {this.state.items.map(item =&gt; (
              &lt;Item ref={inst =&gt; (this[`ref_${item}`] = inst)} item={item} /&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>