如何将所有元素放在flex列的底部

Question

我正在Angular中创建聊天，并且当前正在创建feed组件。我需要在底部显示消息。

我有以下HTML代码：

    <div class="feed">
 <div class="message">
   Test 1
 </div>
 <div class="message">
   Test 2
 </div> 
 <div class="message">
   Test 3
 </div>
</div>

这个CSS：

.feed {
  display: flex;
    flex-direction: column;
    margin-left: 1em;
    overflow-x: hidden;
    overflow-y: auto;
    height: 300px;
    border-style: solid;
    border-width: 5px;
}

.message {
  margin: 5px;
  padding-left: 5px;
  border-style: solid;
  border-width: 5px;
}

我的问题是消息显示在顶部。我已经尝试使用“ align-items”，“ align-sel”，“ justify-content”等。 这就是我得到的：

这就是我想要的：