父元素设min-height:300px时overflow失效，求修复方案

我开发的Vue组件中，父元素.chat设置了min-height:300px，导致子元素.list的overflow-y:auto无法正常生效。组件代码如下：

<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>

问题原因 #

.list设置了max-height:100%，但它的直接父级.partials没有明确高度，同时.chat仅用min-height未设置height，导致100%高度无法正确计算——.list会被内部内容撑开，无法触发垂直滚动。

解决方案 #

1. 给.chat添加明确高度参考，保留min-height的同时设置height：

.chat {
  min-height: 300px;
  height: 100%; /* 也可根据布局需求设具体值，比如height: calc(100vh - 80px) */
  background-color: rgb(var(--v-theme-surface));
  grid-column: span 3 / span 3;
  grid-row: span 3 / span 3;
  border-radius: 20px;
}

2. 给.partials设置height:100%，让它继承.container的高度：

.partials {
  height: 100%;
}

3. 此时.list的max-height:100%会基于父级高度生效，内容超出时自动触发垂直滚动。

若调整后仍未解决，需检查.chat的父元素是否有明确高度设置，因为height:100%依赖父级的确定高度才能生效。

内容的提问来源于stack exchange，提问作者Falkys