<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
Share Improve this question asked Jan 29 at 20:39 FalkysFalkys 11 bronze badge 1- 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
Reset to default 0solution 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