title: Adding a div to the bottom of a list view pushes all view upward out of viewport
body: <p>I am implementing a chat view in <code>React</code>,and the desired behavior is that whenever new data is pushed into the <code>dataSource</code>, the chat view (an infinite list) scrolls to the bottom, there are many implementations, some found here: <a href="https://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react">How to scroll to bottom in react?</a>.  However when I try to implement it, I am getting this strange behavior where all the views in the window are &quot;pushed upward&quot; out of sight by some 300px, as if to accomadate this new <code>&lt;div&gt;</code> that is at the bottom of the list view. My implementation below:</p>
  <pre><code>        import React, {useEffect, useRef} from &quot;react&quot;;
          import { createStyles, makeStyles, Theme } from &quot;@material-ui/core/styles&quot;;
          import InfiniteScroll from 'react-infinite-scroll-component';
  
  
          const row_1 = 2.5;
          const row_chat = 4
  
          const useStyles = makeStyles((theme: Theme) =&gt; createStyles({
  
              container: {
                  width: '40vw',
                  height: `calc(100vh - 240px)`,
                  position: 'relative',
                  padding: theme.spacing(3),  
              },
  
          }));
  
  
          const chat_container_style = {
              width: '40vw',
              height: `calc(100vh - 240px - ${row_chat}vh - ${row_1}vh)`,
          }
  
  
  
  
          function ChatView(props) {
  
              const classes = useStyles();
              const { _dataSource } = props;
  
              // scroll to bottom
              const messagesEndRef = useRef(null)
              const scrollToBottom = () =&gt; {
                  messagesEndRef.current?.scrollIntoView({ behavior: &quot;smooth&quot; })
              }
              useEffect(() =&gt; {
                  scrollToBottom()
              }, [_dataSource]);
  
  
              return (
                  &lt;div className={classes.container}&gt;
  
  
                      {/* chat window */}
                      &lt;InfiniteScroll
                          dataLength={_dataSource.length}
                          next={() =&gt; { return }}
                          hasMore={true}
                          loader={&lt;&gt;&lt;/&gt;}
                          style={chat_container_style}
                      &gt;
                          {_dataSource.map((item, index) =&gt; {
                              return (
                                   &lt;div {...props} key={index} item={item}&gt;
                                      {`item: ${index}`}
                                   &lt;/div&gt;
                              )
                          })}
  
                          {/* putting an item here push all divs upward */}
                          &lt;div ref={messagesEndRef} /&gt;
                      &lt;/InfiniteScroll&gt;
  
  
                  &lt;/div&gt;
              )
  
  
          }
  
  
  
  
  </code></pre>
  <p>Note the use of <code>&lt;InfiniteScroll/&gt;</code> is not the cause of the behavior, Really if I put the <code>ref={messagesEndRef}</code> into any view, it pushes all the views up in the viewport.</p>