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

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

• javascript
• html
• css
• vue.js
• less

• 1 Try giving fixed height to your chatarea class. Like height: 100vh or something. – Rakesh K Commented Aug 18, 2021 at 16:08
• height: 100%; of the parents height wont work if the parent has no fixed height. The browser doesnt know what to apply 100% then too. Also you only get a scrollbar if an element actually overflows. If the element has no height smaller then the content, no overflow will appear and as such no scrollbar have any influence. – tacoshy Commented Aug 18, 2021 at 16:10
• @tacoshy Thanks but I can't understand it clearly. What should I do then? – Anupam Krishna Commented Aug 18, 2021 at 16:12
• I remend you to add a code-snippet instead of a screenshot – Amaarockz Commented Aug 18, 2021 at 16:22

4 Answers 4

in this case you have mented 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 mented 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.

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

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

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>