时间戳

首页 > 解决方案 > flexbox 不会溢出 justify-content: flex-end

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

问题描述

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

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

有人知道这样做的任何解决方案或技巧吗？

这是一个显示我的代码骨架的小提琴：

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

标签： htmlcssflexbox

解决方案

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

我发现通过从 .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>

推荐阅读