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

due to the fact that in the parent min-height: 300px; overflow doesn't work how to fix it

this is only a component and if the problem lies elsewhere, I can give you the whole code

I'm at a dead end and don't know what to do next

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

due to the fact that in the parent min-height: 300px; overflow doesn't work how to fix it

this is only a component and if the problem lies elsewhere, I can give you the whole code

I'm at a dead end and don't know what to do next

• html
• css
• vue.js
• overflow

• Not clear what “doesn't work” means, exactly. As to “whole code”... This is not exactly how it works. Please see: How to create a Minimal, Reproducible Example . – Sergey A Kryukov Commented Jan 30 at 4:52

2 Answers 2

solution is:

.partials {
    overflow-y: auto;
    max-height: 420px;
  }

I think you need to do if height is more than 300px you need to add scroll.

you ca use below snippet for chat class for that.

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

in above snippet i just add overflow as auto and change a min-height to max-height.

min-height = It's used to set a fixed minimum height, but there is no limit for the maximum height. However, it is not working in this case.

max-height = It's used to set a maximum height. If the content exceeds the specified height, a scrollbar is automatically added.

If I'm wrong please let me know I'll help you