Bottom to top layout desing for chat application

Question

I am designing a webapp for chat application. I have an API which returns a list of messages:

chatsite.com/api/thread/1/messages/

[
    {
        "id": 2,
        "sender": {
            "id": 2,
            "email": "[email protected]"
        },
        "sent_datetime": "2017-09-06T17:31:30Z",
        "body": "user two sending a message in new thread (pk1)"
    },
    {
        "id": 1,
        "sender": {
            "id": 1,
            "email": "[email protected]"
        },
        "sent_datetime": "2017-09-06T17:28:56Z",
        "body": "Nwe thread est body"
    }
]

This is how the html is layout for now:

<div id="Thread">
    <div id="Header"></div>
    <div id="MessageList">
        <div class="message">
            <p>{{message.body}}</p>
        </div>
        <div class="message">
            <p>{{message.body}}</p>
        </div>
        <div class="message">
            <p>{{message.body}}</p>
        </div>
    </div>
    <div id="Footer"></div>
</div>

And its related css:

#Thread {
    background-color: mediumseagreen;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 600px;
}

#Header {
    height: 100px;
    background-color: blueviolet;
}

#MessageList {
    background-color: deepskyblue;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.message {
    background-color: white;
    padding: 8px;
    border: 1px solid #f9f9f9;
    font-size: 30px;
    margin: 4px;
}

#Footer {
    height: 100px;
    background: red;
}

As of now all, the messages are ordered by the latest message in a Top to Bottom fashion. Latest being on the top, and so on :

__________________
|                |
|     HEADER     |
|________________|
|                |
| Latest msg     |
|________________|
|                |
| 2nd latest msg |
|________________|
|                |
|                |
|                |
|                |
|________________|
|                |
|     FOOTER     |
|________________|

But I would like to get the messages in Bottom to Top way like all the messaging platform are these days. Latest being on the bottom an so on:

__________________
|                |
|     HEADER     |
|________________|
|                |
|                |
|                |
|                |
|________________|
|                |
| 2nd latest msg |
|________________|
|                |
| Latest msg     |
|________________|
|                |
|     FOOTER     |
|________________|

If it helps, I am using Vuejs as the frontend framework.

Answer 1

Just change:

#MessageList {
    flex-direction: column;
}

to

#MessageList {
    flex-direction: column-reverse; /* this */
}

#Thread {
  background-color: mediumseagreen;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 100vh;
}

#Header {
  height: 25px;
  background-color: blueviolet;
}

#MessageList {
  background-color: deepskyblue;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
}

.message {
  background-color: white;
  padding: 4px;
  border: 1px solid #f9f9f9;
  font-size: 1rem;
  margin: 4px;
}

#Footer {
  height: 100px;
  background: red;
}

<div id="Thread">
  <div id="Header"></div>
  <div id="MessageList">
    <div class="message">
      <p>Latest</p>
    </div>
    <div class="message">
      <p>Older</p>
    </div>
    <div class="message">
      <p>Oldest</p>
    </div>
  </div>
  <div id="Footer"></div>
</div>