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

I am using vue.js with less. I am trying to scroll a div with overflow … Read more overflow-y: scroll or auto not working as intended. It is not scrolling

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 🙂

Source: Vue – Stack Overflow


Categories: NewsTags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *