如何将 `<div>` 中的锚点反转到底部而不是顶部？

Question

我正在构建一个聊天应用程序，需要将消息锚定到消息索引的底部并逐渐增大，而不是挂在消息索引的顶部。我正在构建这个反应，所以下面的代码实际上是 JSX。

留言索引：

        <div className="chat-message-index">
         {this.state.activeChannel.messages.map(function(message{
           return <Message key={message.sid} message={message} />;
            })}
        </div>

消息（在索引中呈现）：

<div className="chat-message">
  <b className="name">{this.state.author}</b><br/>
  <span dangerouslySetInnerHTML={{__html: this.state.message.body}} />
</div>

CSS:

.chat-message-index {
  height: calc(~"100vh - 250px");
  position: absolute;
  overflow-y: scroll;
  width: 100%;
  background-color: silver;
  display: list-item;
}

.chat-message {
  position:relative;
  padding:10px;
  margin:22px 45px 22px 20px;
  color:#fff;
  background:#43464b;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#aeb5ba), to(#43464b));
  background:-moz-linear-gradient(#aeb5ba, #43464b);
  background:-o-linear-gradient(#aeb5ba, #43464b);
  background:linear-gradient(#aeb5ba, #43464b);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

我已经尝试了我能想到的每一个 CSS 技巧，我通过谷歌搜索和 SO 找到的每一个想法，我就是找不到任何东西。我得到的最接近的是在消息索引和消息上使用 transform:rotate(180deg);，但这会反转滚动并导致滚动条出现在索引的左侧，这是行不通的。我或许可以让这种方法奏效，但感觉很老套，我的直觉是它会在未来引起头痛...

有人知道如何简单地反转 <div> 的锚定吗？我想要的只是第一条消息显示在消息索引 <div> 的底部，然后每条附加消息都堆叠在之前出现的 <div> 的顶部。

Answer 1

您可以尝试两件事：

[css] 使用 flexbox 和 flex-direction: column-reverse。请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. Their example 完全按照您的要求行事。
[js] 对您的邮件列表进行排序，使 top-most 项目位于索引 0，最旧的项目位于索引 last。不过，这不如上面的 css 解决方案干净。

Answer 2

Flexbox 可以做到这一点：

.chatbox {
  margin: 1em auto;
  width: 150px;
  height: 500px;
  border: 1px solid grey;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  text-align: center;
}
.message {
  background: lightgreen;
  margin-bottom: .25em;
  padding: .25em 0 0 0;
  border-bottom: 2px solid green;
}

<div class="chatbox">
  <div class="message">MESSAGE 1</div>
  <div class="message">MESSAGE 2</div>
  <div class="message">MESSAGE 3</div>
  <div class="message">MESSAGE 4</div>
  <div class="message">MESSAGE 5</div>
  <div class="message">MESSAGE 6</div>
  <div class="message">MESSAGE 7</div>
  <div class="message">MESSAGE 8</div>
  <div class="message">MESSAGE 9</div>
  <div class="message">MESSAGE 10</div>
  <div class="message">MESSAGE 11</div>
  <div class="message">MESSAGE 12</div>
</div>

如何将 `<div>` 中的锚点反转到底部而不是顶部？

How to invert the anchoring inside a `<div>` to the bottom instead of the top?

javascript

css

react-jsx