overflow-y：滚动或自动无法按预期工作。 它没有滚动

Question

我使用的是 vue.js 和 less。 我正在尝试滚动带有溢出的 div 但它不起作用它保持像溢出：隐藏

问题截图。

这是代码

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

这是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>

谢谢你的帮助：）

Answer 1

在这种情况下，您已经注释了为要滚动的元素设置高度的行，只需替换此代码块： height: 600px; // You had commented this line height: 600px; // You had commented this line

并且最好将overflow设置为auto ，因此如果聊天不滚动（聊天的高度小于容器的高度）滚动条不显示并且它不会使您的 UI 变坏。

Answer 2

每当我使用 css overflow-y属性时，我通常会使用值auto而不是scroll 。

这是我更改的 css，现在它应该对你有用了。 VueJS 不是这里的问题。

<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

尝试提供 max-height 属性

.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

感谢所有帮助过的人。 问题出在justify-content:flex-end我删除了该行，一切都开始按预期工作。