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

Question

我正在创建与 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>

Answer 1

你就快到了！

你可以做两件事来拉近你们的距离：

1. 为了防止弹性项目折叠（将其自身划分到其所在容器的空间中），需要设置一个显式的最小高度，而不仅仅是一个高度
2. 创建一个包装消息的容器 div： .messages-container并为其指定显式的最大高度和溢出自动。

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

工作示例：

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

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