How do I enable overflow in a child element when the parent uses min-height?

I'm working on a Vue component where the parent container (.chat) has a CSS rule of min-height: 300px, and a child element (.list) uses overflow-y: auto with max-height: 100%. However, the overflow isn't working as expected. I suspect this is due to using a percentage-based height on the child while the parent only has a minimum height defined, which prevents proper calculation of max-height: 100%.

Below is the relevant code snippet:

VUECopied
<template>
    <div class="chat">
    <div class="container">
        <div class="messages">
            <p>s</p>
        </div>
        <div class="partials">
            <div class="list">
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
                <div class="partial"></div>
            </div>
        </div>
    </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    display: flex;
    height: 100%;
}
.messages {
    width: 70%;
    background-color: #252525;
    border-radius:20px 30px 30px 20px;
}
.list {
    overflow-y: auto;
    max-height: 100%;
}

.partial {
    height: 50px;
    width: 100px;
    background-color: #000;
    margin-bottom: 20px;
}

.chat {
  min-height: 300px;
  background-color: rgb(var(--v-theme-surface));
  grid-column: span 3 / span 3;
  grid-row: span 3 / span 3;
  border-radius: 20px;
}
</style>

The issue is that when only a min-height is specified for .chat, the child element's max-height: 100% can't be computed correctly. I've tried various approaches but I'm at a dead end. If needed, I can provide additional code. Any suggestions to properly enable overflow in this scenario?