Приложение чата не прокручивается при добавлении новых сообщений

Question

Я создал приложение для чата с использованием Ionic 4 и Firebase.Тем не менее, это не прокрутка и, как следствие, я не могу добавить больше сообщений.

вот HTML:

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let message of messages.message">
      <ion-col size="9" *ngIf="myItinerary.userId !== message.userId" class="message other-user">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
      </ion-col>

      <ion-col offset="3" size="9" *ngIf="myItinerary.userId === message.userId" class="message me">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer>
  <ion-toolbar light="light">
    <ion-row align-items-center no-padding>
      <ion-col size="10">
        <textarea autosize maxRows="3" [(ngModel)]="newMsg" class="message-input"></textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="newMsg === ''" class="msg-btn"
        (click)="sendMessage()">
        <ion-icon name="ios-send" slot="icon-only"></ion-icon>
      </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

Это пример, который я нашел, и он работает ... Я могу добавлять сообщения, но он просто не прокручивается.Я не получаю сообщение об ошибке

Я добавляю .css в соответствии с предложением постеров ... он тоже не работает, но я, вероятно, не делаю это правильно.

.message{
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 4px;
    white-space: pre-wrap
}

.other-user{
    background: var(--ion-color-tertiary);
    color: #fff;
}

.me{
    background: var(--ion-color-secondary);
    color: #fff;
}

.time{
    color: #dfdfdf;
    float: right;
    font-size: small;
}

.message-input {
    width: 100%;
    border: 1px solid var(--ion-color-medium);
    border-radius: 10px;
    background: #fff;
    resize: none;
    padding-left: 10px;
    padding-right: 10px;
}

.msg-btn {
    --padding-start: 0.5em;
    --padding-end: 0.5em;
}

.style{
    display: "flex";
    flex-wrap: "wrap";
    overflow: "auto";
}

Добавлено css за

Answer 1

Я исправил это, заменив ионную сетку ионным списком.

<ion-content>
  <ion-list lines="none">
    <ion-item *ngFor="let message of messages.message">
      <div size="9" *ngIf="myItinerary.userId !== message.userId" class="message other-user">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
        </div>

      <div offset="3" size="9" *ngIf="myItinerary.userId === message.userId" class="message me" slot="end">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
        </div>
    </ion-item>
  </ion-list>
</ion-content>

Answer 2

вы можете добавить переполнение или обернуть div, дополнительно вы можете добавить одну таблицу стилей, реализованную переполнением: auto и width: 100% или height :;если горизонтальный или вертикальный;

• https://angular.io/api/animations/style

    style({ display: "flex", flex-wrap: "wrap", overflow: "auto" })