html - flexbox 不会溢出 justify-content : flex-end

Question

我正在使用 css flexbox 创建聊天，因为我希望我的消息显示在容器底部，所以我使用了 justify-content: flex-end 但是当我有很多消息时div 无法使用 overflow: auto

滚动

我已经阅读了一个解决方案，该解决方案是反转我的 .messages div 和我的 .write-zone div 并替换 flex-direction: column -reverse 但这对我来说不是一个好的解决方案，因为我的 .messages div 的内容是动态的，消息将被添加并且滚动级别不会跟随，而且我'我想避免在 javascript 中控制滚动。

有人知道执行此操作的任何解决方案或技巧吗？

这是一个显示我的代码框架的 fiddle :

.container {
  width: 60%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.messages {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

.message {
  margin: 5px;
  height: 80px;
  display: flex;
  flex-direction: row;
}

.message.user {
  justify-content: flex-end;
  background-color: #2bf;
}

.message.other {
  justify-content: flex-start;
  background-color: #bbb;
}

.write-zone {
  width: 100%;
  height: 7%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

input {
  width: 80%;
}

<div class="container">
  <div class="messages">
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div><div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
  </div>
  <div class="write-zone">
    <input type="text" />
    <button>
    send
    </button>
  </div>
</div>

Answer 1

这听起来像是在有很多消息时试图使聊天框可滚动。

我发现通过从 .messages 中删除 justify-content flex-end 我可以滚动浏览消息。

希望这对您有所帮助。

.container {
  width: 60%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.messages-container {
  height: 100%;
  max-height: 300px;
  overflow: auto;
}

.messages{
  display: flex;
  flex-direction: column;
  /*   justify-content: flex-end; */
  overflow: auto;
}

.message {
  margin: 5px;
  height: 80px;
  display: flex;
  flex-direction: row;
}

.message.user {
  justify-content: flex-end;
  background-color: #2bf;
}

.message.other {
  justify-content: flex-start;
  background-color: #bbb;
}

.write-zone {
  width: 100%;
  height: 7%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

input {
  width: 80%;
}

<div class="container">
  <div class="messages">
  <div class="messages-container">
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div><div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    <div class="message user">
      Toto
    </div>
    <div class="message other">
      Titi
    </div>
    </div>
  </div>
  <div class="write-zone">
    <input type="text" />
    <button>
    send
    </button>
  </div>
</div>