How to put all elements at the bottom of a flex column

Asked Mar 04 '19 at 08:59

Active Mar 04 '19 at 13:50

Viewed 25 times

I am creating a chat in Angular, and I am currently creating the feed component. I need to display the messages at the bottom.

I have this HTML code:

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

And this 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;
}

My problem is that the messages are displayed at the top. I have already tried to use "align-items", "align-sel", "justify-content", etc. This is what I get: