flexbox不会因为justify-content溢出而溢出：flex-end

Question

我正在使用css flexbox创建聊天，并且由于我希望我的消息在容器的底部显示，我使用了justify-content: flex-end但是当我需要很多消息时，div不是't}可以overflow: auto

滚动

我已经阅读了一个解决方案，该解决方案可以撤销我的.messages div和我的.write-zone div以及替换flex-direction: column-reverse，但这对我来说不是一个好方法因为我的.messages div的内容是动态的，所以会添加消息并且滚动级别不会跟随，并且我希望避免在javascript中控制滚动。

有人知道任何解决方案或技巧吗？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解正确，你会尝试让消息从底部对齐，如果出现新消息则向上移动。

在容器上使用justify-content: flex-end是正确的，但如果.messages占用了所有可用的高度，那么仍然没有效果。

从.messages开始，移除height: 100%并将其justify-content: flex-end（这似乎是不必要的）替换为margin-top: auto，我认为您将更进一步。

.messages {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    overflow-y: auto;
}

所以你要找的'技巧'是一个自动保证金：https://www.w3.org/TR/css-flexbox-1/#auto-margins。

Answer 2

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

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

Answer 3

你快到了！

你可以采取两件措施让你更接近：

1. 为了防止弹性物品坍塌（将其自身分隔在容器的空间中），设置一个明确的最小高度而不是高度
2. 创建一个包装邮件的容器div：.messages-container并为其显示一个显式的max-height和overflow auto。

<强> HTML：

<div class="messages">
    <div class="messages-container"> <!-- New Wrapping Container -->
       <div class="message user">

<强> CSS：

    .message {
      min-height: 80px;
    }

   .messages-container {
      height: 100%;
      max-height: 300px;
      overflow: auto;
    }
   .messages{
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
      overflow: auto;
    }

工作示例：

＆＃13;
＆＃13;
.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;
  min-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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;