垂直滚动带显示：flex

Question

我有一个固定高度的容器，其中的消息溢出了容器的高度（overflow-y: scroll），我希望内容始终向下滚动到最后一条消息。

为了使消息与容器底部对齐，我使用flexbox：

display: flex;
flex-direction: column;
justify-content: flex-end;

但是，当我将其添加到CSS时，我破坏了滚动行为。我该如何解决？

此处的工作示例： https://jsfiddle.net/32snmfah/1/