Html 使css3 div浮动到顶部

我正在尝试制作一个聊天应用程序，其中每个新消息都会创建一个插入容器底部的新div，从而将前面的消息撞向容器顶部。我可以将消息添加到容器中，但无法使定位正确工作

HTML（示例）：

---

如果我使用上述样式，每个后续的.message div框都将插入到与前面的消息相同的位置，从而隐藏它们。我想在不必依靠javascript更新样式属性的情况下，将消息1推到页面顶部。

您的问题有一个解决方案：

<div id='chat_container'>
  <div id='wrapper'>
    <div class='message'>Message 1</div>
    <div class='message'>Message 2</div>
  </div>
</div>

全能者前来救援

#chat_container {
    display:flex;
    flex-direction:column-reverse
}
.message {
    display:block;
    width:100%;
    margin:20px auto;
    border:1px solid #000;
}

一些概念化

CSS3 Flexible Box或flexbox是一种为 页面上元素的排列方式，使元素可以正常工作 可预见的是，页面布局必须适应不同的屏幕 尺寸和不同的显示设备。对于许多应用程序 “柔性箱”模型是对“块”模型的改进 它不使用浮动，flex容器的边距也不使用浮动 用内容的边距折叠

许多设计师会发现flexbox模型更易于使用。小孩 flexbox中的元素可以在任何方向上布局，并且可以具有 灵活的尺寸以适应显示空间。定位子对象 因此，元素更容易，复杂的布局也更容易实现 简单且代码更清晰，因为元素的显示顺序是 独立于它们在源代码中的顺序。这种独立性 故意只影响视觉渲染，保留语音顺序 和基于源顺序的导航

---

来自Mozilla MDN“

我所看到的所有与此设计问题相关的解决方案都使用JavaScript/jQuery将滚动条设置到底部。另一种方法是将新消息添加到

聊天室容器的顶部“在您的声明中，原则上意味着有一个条件要适用，以便程序/应用程序/站点等。。我可以做决定。如果你不想使用javascript，那没关系。但请记住，某些事情或某个地方会有一个条件。我不记得HTML有
if{}else{}
我只是觉得令人惊讶的是CSS没有一个方法来从下到上定位div元素相对于父容器，而不是相反。我反对用JS做这样的事情，因为它应该由CSS来处理。好的解决方案。我认为我们应该推广像flexbox和inline block这样的功能，而不是使用float和display:table来完成它们并非真正为之设计的事情。由于浏览器支持问题，flex相对较新，但现在所有现代浏览器都支持它，越来越多的人每天都在采用这种模式，因为它在许多以前的CSS没有涵盖的场景中发挥着神奇的作用。它让我的80%都在那里，但它将所有新消息放在第一条消息的上方（而不是下方）。我现在正在浏览文档……我将其与Javascript的insertBefore方法结合使用，这使我能够在每次发布新消息（child）时重新定义第一个子元素。FLEX非常棒，非常感谢您的帮助！！！这并不像我预期的那样有效。我发现聊天室溢出时正在缩小。我已经研究过各种不同的方法来预防这种情况，但似乎无法做到。谢谢你的建议。这种方法很有效，但我在处理溢出的问题时遇到了麻烦。此显示类型是否存在溢出？它似乎在添加新的div，而不考虑css中的溢出和高度。
<div id='chat_container'>
  <div id='wrapper'>
    <div class='message'>Message 1</div>
    <div class='message'>Message 2</div>
  </div>
</div>

#chat_container{
    height: 240px;
    display: table;
}
.wrapper{
    display: table-cell;
    vertical-align: bottom;
}
.message{
    position: relative;
}

#chat_container {
    display:flex;
    flex-direction:column-reverse
}
.message {
    display:block;
    width:100%;
    margin:20px auto;
    border:1px solid #000;
}