title: Angular nativeElement.scrollTop has weird behavior
body: <p>Can you tell me why <code>this.myScrollContainer.nativeElement.scrollTop</code> doesn't get the assigned value of this <code>this.myScrollContainer.nativeElement.scrollHeight</code>? What is hapening here?</p>
  
  <p>.ts</p>
  
  <pre><code> @ViewChild('scrollMe', { static: false }) private myScrollContainer: ElementRef;
  
    scrollToBottom(): void {
       this.myScrollContainer.nativeElement.scrollTop =  this.myScrollContainer.nativeElement.scrollHeight;
     }
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>&lt;div class="row2" #scrollMe&gt;
        &lt;ion-row&gt;
          &lt;ion-col&gt;
            &lt;app-school&gt;&lt;/app-school&gt;
          &lt;/ion-col&gt;
        &lt;/ion-row&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>.scss</p>
  
  <pre><code>.content {
      ion-grid {
          display: flex;
          flex-direction: column;
          height: 100% !important;
      }
  
      .row1 {
          flex: 2 !important;
      }
  
      .row2 {
          flex: 5 !important;
          overflow: scroll !important;
      }
  }
  </code></pre>
  
  <p>Gif - click to see it on a big screen</p>
  
  <p><a href="https://i.stack.imgur.com/NVU4g.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NVU4g.gif" alt="enter image description here"></a></p>