Scroll bar is getting shortened automatically in ionic framework

Question

while i am writing this code "{{weatherinfo.name},{{weatherinfo.sys.country}},{{weatherinfo.coord.lan}},{{weatherinfo.coord.lon}}" scroll bar shrinking automatically. i'm tired to solve this problem.

this is the code of both file and output Screen.

home.page.html File code.

<ion-list>
   <ion-card class="ion-no-margin">
     <ion-item-divider color="light">Weather Location</ion-item-divider>
      <img src="https://i.stack.imgur.com/HILmr.png" />
        <ion-item>City: {{weatherinfo.name}}</ion-item>
         <ion-item>Country: {{weatherinfo.sys.country}}</ion-item>
         <ion-item>Coordinates:{{weatherinfo.coord.lan}} {{weatherinfo.coord.lon}}</ion-item>
    </ion-card>
</ion-list>

home.page.ts file code.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-home',
templateUrl: 'home.html',
styleUrls: ['home.page.scss'],
})export class HomePage {

weatherinfo: any = {};

constructor(
    public navController: NavController,
    private httpclient: HttpClient,
    ) {
    this.getData();
    }
    getData() {
    this.httpclient
    .get(
   https://api.openweathermap.org/data/2.5/weatherq=indore&appid=19101e659a9c0d95a5bb6cc56a7f7dfc'
   )
   .subscribe(
    (data) => {
    console.log(data);
    this.weather info = data;
    },
    (error) => {
    console.log(error);
      }
    );
   }
 }

OutPut Screen(ionic lab):

https://i.stack.imgur.com/xtWrS.png