Установите div прокручивается вниз, когда событие выполнено

Question

У меня есть div, содержащий отправленные и полученные сообщения, и кнопку для отправки. Я хочу прокручивать div вниз, когда отправляю новое сообщение.

<div style="display: flex; flex-direction:column; justify-content: space-between; ">
    <div class="widget-body" style="height: 100%">
      <div class="card" *ngIf="complaint.remarks.length == 0" style="min-height: 220px">
        <div class="card-body">
          <p>{{'plaintes.seul.msgnbr' | translate}}</p>
        </div>

      </div>

      <div class="chat" *ngIf="complaint.remarks.length != 0" style="overflow-y: scroll">
        <div *ngFor="let remark of complaint.remarks">
          <div *ngIf="remark.remark" class="mine messages">
            <div class="message last">
              {{ remark.remark }}
            </div>
          </div>
          <div *ngIf="remark.response" class="yours messages">
            <div class="message last">
              {{ remark.bresponse }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Widget Body -->
    <!-- Begin Write Comment -->
    <div class="px-2 mb-2 d-flex justify-content-center">
      <input [disabled]="complaint.status == 'done' || complaint.status== 'rejected'" (keyup.enter)="comment(complaint._id)" [(ngModel)]="remark" type="text" class="form-control rounded-only-left" placeholder="{{'plaintes.seul.votremessage' | translate}}" dir="{{ 'dir'| translate}}">
      <div class="input-group-append ">
        <button (click)="comment(complaint._id)" class="btn btn-primary ripple rounded-only-right" type="submit">
          <i class="la la-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>

---

ts:

comment(){...}

---

функция комментария отправляет запрос на изменение атрибута примечания в режиме жалобы

как установить прокрутку вниз, когда новый элемент в div