Chat com barra de rolagem só nas mensagens

Front-end
#1

imagemUm
imagemUm.png567×692 25.1 KB

imagemDois
imagemDois.png570×693 30 KB

chat.component.html

<mat-toolbar color="primary">Chat</mat-toolbar>
<br />
<br />
<br />
<br />
<form [formGroup]="chatComponentFormGroup">
    <mat-form-field >
        <textarea matInput placeholder="Send message" id="message" 
            formControlName="message" name="message" #message>
        </textarea>
        <mat-hint align="end">{{message.value.length}}</mat-hint>
    </mat-form-field>
    <button mat-mini-fab color="warn" (click)="sendMessage()">
        <mat-icon>send</mat-icon>
    </button>
</form>
<br />
<mat-divider></mat-divider>
<br />
<mat-card class="mat-card-top">
    <mat-card-title>Posts</mat-card-title>
    <mat-card-content class="chat-middle-box">
        <div *ngFor="let mensagem of mensagens" class="{{mensagem.posicao}}">
            <div class="chat-message">
                <div class="{{mensagem.cor}}">{{mensagem.textMessage}}</div>
                <span class="chat-name">{{mensagem.fromUser}}</span>
                <br />
                <span class="chat-date">{{mensagem.timestamp | date: 'medium' }}</span>
            </div>
        </div>
    </mat-card-content>
</mat-card>

chat.component.scss

::ng-deep .mat-toolbar{
  z-index: 999;
  position: fixed;
  margin-top: -20px !important;
  width: 410px !important;
}

Metodo que chama o chat

public chat(): void {
    console.log(this.senderId);
    console.log(this.conferenceCallUrl);
    let room = this.conferenceCall ? this.senderId : this.conferenceCallUrl;
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '450px';
    dialogConfig.height = '550px'
    dialogConfig.position = {
      top: '100px',
      left: '70%',
    }
    dialogConfig.data = {
      room: room
    };
    this.dialog.open(ChatComponent, dialogConfig);
  }

Estou tentando deixar o <mat-toolbar> com o position-top: 0, width: 100%, mas não consegui ainda.

O que posso trocar o <br />

Estou também tentando deixa a parte do form <form [formGroup]="chatComponentFormGroup">, fixa. e ainca com fundo branco

Assim só tera barra de rolagem com as mensagem

O que está faltando ?

#2

https://developer.android.com/reference/android/widget/ScrollView

scrollview

#3

Mas não é android.

Angular

#4

scrollView é uma linguagemm Java, pesquise por uma condição analóga.

#5

ScrollView NÃO é uma linguagem

#6

parametro que seja

#7

quis dizer parametro da linguagem Java

#8

Quase igual, né? Até confundi tambem

#9

vc é ruim de interpretação, ScrollView é uma linguagem Java, logo contempla o contexto dos argumentos anteriores e conclui-se que Scrollview faz parte da linguagem Java.