Как разместить все элементы внизу столбца flex

Я создаю чат в Angular, и в настоящее время я создаю компонент канала. Мне нужно отображать сообщения внизу.

У меня есть этот 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" и т.д. Вот что я получаю:

И это то, что я хочу: