当离子列表位于容器div底部

Question

我在ion-list容器中有一个div。我想要的是：

• 将列表放在父div底部。
• 如果列表中还有更多项目（单击蓝色按钮）不适合div，则会出现滚动条。

我在父overflow:auto中使用div滚动。请参见下面的代码（以及Stackblitz中的示例）：

HTML：

<div class="video-container">
  <ion-list class="options-list">
        <button ion-item text-wrap *ngFor="let option of optionsList">
                {{ option }}
        </button>
    </ion-list>
</div>

<div class="finish-button-container">
    <button ion-button round (click)="addItemsToList()">ADD ITEMS TO LIST (ONLY ONCE)</button>
</div>

CSS：

.video-container {
    position: relative;
    background-color: red;
    height: 200px;
    overflow: auto;

    .options-list {
        position: absolute;
        width: 100%;
        margin: 0;
        bottom: 0; // <---
    }
}

.finish-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32px;
    position: relative;
}

但这是发生了什么

首先，当列表位于顶部并添加更多项目时，将显示滚动条。但是，如果列表位于底部，并且我添加了更多项目，则不会出现滚动条。我不知道这是怎么回事。