Angularアプリのulタグオーバーレイ内で垂直スクロールが機能しない

アイテムのリストをスクロールしようとしていますが、スクロールはすべてではなく一部のアイテムに対してのみ機能します。特定のアイテムの後、スクロールは停止し、最後のアイテムに移動しません。

これがStackblitzのリンクです。https://angular-cym8q4.stackblitz.io/

これは、プロファイルのリストを含むチャットリストオーバーレイ用です。次のスクリーンショットを参照してください。

上のスクリーンショットでは、すべてのプロファイルをスクロールすることはできません。一部のプロファイルでのみ発生する場合はスクロールします。リストの最後には移動しません。

これが私のコードです：

app.component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-3 d-none d-lg-block col-offset-5 red coloverlay bg-custom">
            <app-chatlist></app-chatlist>
        </div>
    </div>
</div>

app.component.css

.coloverlay {
  background-color: rgba(233, 33, 33, 0.4);
  margin: 0;
  padding: 0;
  position: fixed;
  top: 150px;
  z-index: 1;
  bottom: 0;
  right: 0;
  margin: 0;
}

.bg-custom {
  background: #2c3e50;
}

chatlist.component.html

<div class="container-fluid p-0">
    <div class="row m-0 ">
        <div class="col p-0">

            <div class="d-flex flex-row chatlistbox ">
                <div class="m-2">
                    Chat
                </div>

                <div class="ml-auto mt-1 pr-2">
                    <i class="fa fa-window-minimize " aria-hidden="true"></i>
                </div>
                <div class="m-2">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                </div>
            </div>

            <div class="customList">
                <ul class="list-group  overflow-auto" id="contact-list">
                    <app-chatlist-item class="list-group-item p-0 border-0" *ngFor="let el of elList" [element]="el">
                    </app-chatlist-item>
                </ul>
            </div>
        </div>
    </div>
</div>

chatlist.component.css

.overflow-auto {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.customList {
  height: 93%;
}

.chatlistbox {
  background: aquamarine;
  height: 2%;
}

chatlist-item.component.html

<div class="d-flex flex-row bg-custom item">
    <div class="p-2">
        <img src="{{element.imagePath}}" alt="" />
    </div>
    <div class="p-2">
        <div class="d-flex flex-column flex-wrap name">
            <h6 class="m-0">
                {{element.firstName}} {{element.lastName}}
            </h6>
            <span class="details">
                {{element.details}}
            </span>
        </div>
    </div>

</div>

チャットリスト-item.component.css

img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  padding: 3px;
  float: left;
  cursor: pointer;
}

.bg-custom {
  background: #2c3e50;
}

* {
  color: #e3dcdc;
}

.item:hover {
  background: #32465a;
}

何が問題なのかわかりません。どんな助けでも大いに感謝されるでしょう。