如何让可滚动弹性框容器中的新项目显示最新的最下方(包括小提琴)

Question

我正在尝试使用 flexbox 实现一个基本的即时消息接口，其中交互字段构成静态页脚，新消息出现在内容字段的底部并向上推送现有消息。

然而，我很难找到一个优雅的解决方案来应对使新元素看起来最低的挑战。

我在这里做了一个小提琴来说明我的问题：https://jsfiddle.net/jensmtg/1fob3mat/

我最接近解决这个问题的方法是通过实施一个系统来为新消息提供负面和递减的 cssorder值，但我希望有更好的方法来做到这一点？

Answer 1

使用unshift而不是push

this.message_stack.unshift('This is message #' + this.message_count);

小提琴： https://jsfiddle.net/1fob3mat/1/