фиксированное перекрытие элементов поля ul в позиции

Question

В настоящее время я внедряю небольшую систему чата. Я хочу иметь чат, и в этом у меня есть сообщения, кнопка и вход для отправки новых сообщений. Проблема, с которой я сталкиваюсь, состоит в том, что перекрытие входа (у которого есть фиксированная позиция), кто-нибудь знает, как избавиться от этой проблемы?

Я пытался поместить отступы внизу, поле-отступ, позицию относительно списка и многие другие решения в Интернете, но я не нашел ни одного решения, которое решило бы мою проблему.

Вот HTML:

<h4 id="chatTitle">NearyChat</h4>
<mat-divider></mat-divider>
<div id="containerChat" *ngIf="canLoad">
 <ul class="messages" id="listMessages">
  <mat-list *ngFor="let msg of messagesEvent">
    <p>{{msg.messageContent}}</p>
   <mat-divider></mat-divider>
  </mat-list>
 </ul>
<mat-form-field  id="msgSended">
<input matInput placeholder="Write a message" [(ngModel)]="messageSended"    autocomplete="off">
 <button mat-icon-button matSuffix>
  <mat-icon matSuffix (click)="sendMessage()">send</mat-icon>
 </button>
 </mat-form-field>
 </div>

А вот мой css:

 #msgSended{
width:500px;
position:fixed;
bottom:0;
 }
#chatTitle{
display:block;
margin-bottom: 3px;
text-align: center;
}
.messages{
 margin-bottom: 50px;
 }

Я не могу опубликовать изображение в stackoverflow, но вот результат, если кто-то захочет посмотреть на него: https://ibb.co/WPVJYYw

Я просто хочу, чтобы элементы не перекрывали вход в нижней части экрана.

Если бы кто-то мог мне помочь, было бы здорово, заранее спасибо.

Лио