Prevent Vue.js listview from overflowing the page with dynamic height

Question

Adding a <b-list-group> element to a dynamic page caused me some problems.

I'd like to use css to modify the height of the listview dynamically, however using e.g. max-height: 50%; has no effect. In addition, the page overflows for no apparent reason. It would work absolutely fine if I used a hardcoded height, such as max-height: 300px;.

I tried a few things and looked for a solution on the internet, but after hours of searching, I couldn't discover anything.

Please note that the code below is simply a piece of a larger application.

HTML:

<template>
    <div class="page">
        <div class="left-box">
            <b-form-select @change="getStorageInventory()" class="storageSelectBox" v-model="selectedStorageId" :options="storages"></b-form-select>
            <div class="listview">
                <b-list-group>
                    <b-list-group v-for="item in items">
                        <b-list-group-item v-if="item.selected" variant="primary" value="item.value" v-on:click="ListViewselected(item)" button>{{item.text}}</b-list-group-item>
                        <b-list-group-item v-if="item.finished && !item.selected" variant="dark" value="item.value" v-on:click="ListViewselected(item)" button>{{item.text}}</b-list-group-item>
                        <b-list-group-item v-if="!item.selected && !item.finished" value="item.value" v-on:click="ListViewselected(item)" button>{{item.text}}</b-list-group-item>
                    </b-list-group>
                </b-list-group>
            </div>
        </div>


        <div class="center-box">
            <label class="item-lbl" for="inputItemCount" value="selectedItem">{{itemlbl}}</label>
            <b-form-input id="inputItemCount" class="inputs" type="number" v-model="itemCount" placeholder="Bestand" aria-describedby="input-live-feedback" :state="inputState" min="0" max="2147483646"></b-form-input>
            <b-form-invalid-feedback id="input-live-feedback" class="inputErrorlbl">{{ErrorMessage}}</b-form-invalid-feedback>
        </div>
        <div class="right-bottom-corner-box">
            <b-button @click="previous()" class="btnClass" variant="primary" :disabled="selectedIndex == 0">previous</b-button>
            <b-button @click="next()" class="btnClass" variant="primary" :disabled="selectedIndex == items.length -1 && !inputState">next</b-button>
        </div>
    </div>
</template>

JS:

export default {
        data() {
            return {
                itemCount: "",                
                itemlbl: "testLabel",
                selectedStorageId: 0,
                ErrorMessage: String,
                selectedIndex: 0,
                throwError: false,
                storages: [{ value: 0, text: 'Storage 1' },
                { value: 1, text: 'Storage 2' },
                { value: 2, text: 'Storage 3' }],
                selected: 0, 
                items: [{ text: "item0", value: "randomId0", selected: false, finished: true },
                { text: "item1", value: "randomId1", selected: false, finished: true },
                { text: "item2", value: "randomId2", selected: false, finished: false },
                { text: "item3", value: "randomId3", selected: false, finished: true },
                { text: "item4", value: "randomId4", selected: true, finished: false },
                { text: "item5", value: "randomId5", selected: false, finished: false },
                { text: "item6", value: "randomId6", selected: false, finished: false },
                { text: "item7", value: "randomId7", selected: false, finished: false },
                { text: "item8", value: "randomId8", selected: false, finished: false },
                { text: "item9", value: "randomId9", selected: false, finished: false },
                { text: "item10", value: "randomId10", selected: false, finished: false },
                { text: "item11", value: "randomId11", selected: false, finished: false },
                { text: "item12", value: "randomId12", selected: false, finished: false },
                { text: "item13", value: "randomId13", selected: false, finished: false },
                { text: "item14", value: "randomId14", selected: false, finished: false },
                { text: "item15", value: "randomId15", selected: false, finished: false }] 
            }
        }        
     }

CSS:

.listview {
        margin-top: 10px;
        width: 100%;
        min-width: 75px;
        max-height: 55%;
        overflow-y: scroll;
        display: block;
    }

    .inputs {
        background-color: #0094FE;
        color: white !important;
        width: 20%;
        height: 50px;
        min-width: 100px;
        text-align: center;
    }

        .inputs::placeholder {
            color: white !important;
            opacity: 0.5 !important;
        }

    .center-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .left-box {
        display: flex;
        flex-direction: column;
    }

    .right-bottom-corner-box {
        float: right;
        display: flex;
        align-items: flex-end;
        flex-direction: row;
        align-content: center;
        justify-content: flex-end;
        margin-bottom: 2%;
    }

    .page {
        display: flex;
    }

    b-button :hover {
        background-color: #006CFE;
    }

    .item-lbl {
        color: black;
        margin-bottom: 5px;
    }

    .inputErrorlbl {
        text-align: center;
    }

    .storageSelectBox {
        width: 100%;
        float: left;
        background-color: #0094FE;
        color: white;
    }