I am using vue.js with less. I am trying to scroll a div with overflow but its is not working it stays like overflow:hidden
This is the code
<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>
This is the 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>
Thanks for any help :)
in this case you have commented the line that you set a height to the element that you want it to scroll, just replace this block of code :
height: 600px; // You had commented this line
and it's better to set overflow to auto, therfore if the chat does't scroll (height of chats is less that height of container) the scroll bar not show and it does't make your UI bad.
Whenever I use the css overflow-y attribute, I would normaly use the value auto instead of scroll.
Here is your css that I changed, and now it should work for you. VueJS isn't the problem here.
<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>
Try giving max-height attribute
.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;
}
}