Estoy usando vue.js con menos. Estoy tratando de desplazar un div con desbordamiento pero no funciona, permanece como desbordamiento: oculto
Captura de pantalla del problema.
este es el codigo
<template> <div class="chatarea" v-if="currentRoom"> <ChatInput /> <div class="chatbox"> <ChatBit :message="chats.message" :sender="chats.username" v-for="(chats, index) in messages[currentRoom]" :key="index" /> </div> </div> </template>este es el css
<style lang="less" scoped> .chatarea { width: calc(100% - 300px); height: 100%; display: flex; flex-direction: column-reverse; align-items: center; background-color: #3b3d47 - #222222; .chatbox { height: calc(100% - 50px); // height: 600px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: scroll; } } </style>Gracias por cualquier ayuda :)
en este caso, ha comentado la línea en la que establece una altura para el elemento que desea que se desplace, simplemente reemplace este bloque de código: height: 600px; // You had commented this line
y es mejor configurar el overflow en auto , por lo tanto, si el chat no se desplaza (la altura de los chats es menor que la altura del contenedor), la barra de desplazamiento no se muestra y no hace que su interfaz de usuario sea mala.
Cada vez que uso el atributo css overflow-y , normalmente uso el valor auto en lugar de scroll .
Aquí está su css que cambié, y ahora debería funcionar para usted. VueJS no es el problema aquí.
<style lang="less" scoped> .chatarea { width: calc(100% - 300px); height: 100%; display: flex; flex-direction: column-reverse; align-items: center; background-color: #3b3d47 - #222222; .chatbox { height: calc(100% - 50px); // height: 600px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: auto; } } </style>Intenta dar el atributo de altura máxima
.chatarea { width: calc(100% - 300px); height: 100%; // suggest you to 100vh display: flex; flex-direction: column-reverse; align-items: center; background-color: #3b3d47 - #222222; .chatbox { max-height: calc(100% - 50px); // height: 600px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: scroll; } }