Scroll doesn't appear when ion-list is positioned on bottom of container div

I have an ion-list inside a div container. What I want is:

• Positionate the list in the bottom of the parent div.
• If there are more items in the list (click the blue button) that don't fit in the div, a scroll should appear.

I get the scroll with overflow:auto in the parent div. See code below (and example in 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;
}

But this is what occurs:

First, when the list is positioned on top and I add more items, the scroll appears. But, if the list is positioned on bottom and I add more items, the scroll doesn't appear. I'm not able to know what is going wrong with this.