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

admin管理员组

文章数量:1316329

<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

Share Improve this question Follow asked Jan 29 at 20:39 FalkysFalkys 111 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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

本文标签： htmldue to the fact that in the parent minheight 300px overflow doesn39t work how to fix itStack Overflow