overflow-y: scroll or auto not working as intended. It is not scrolling

Question

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

Screenshot of the problem.

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

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

Thanks for everyone who helped. The problem was in justify-content:flex-end I removed the line and everything started to work as intended.