Appending to bottom of container (not end of code)

Question

General Info
Working on a chatsystem. When users join a chatroom, they're unable to see any previous messages. I'm trying to make the first new message appear at the bottom of the messages container and then just append followup messages underneath it.

Ideas I've had myself

1. Make the container relative and each message absolute positioned. Then just give the message bottom: 10px;. This wouldn't work, as it would keep the messages at the bottom and start stacking them up.

2. Create an invisible div inside the container with a percentage height so most of the empty space is taken and any message appended would appear underneath it. This also wouldn't work because percentage height would remain in effect and keep pushing everything down.

3. Create an invisible div and use Javascript to give it a static height based on the users screensize. It would work, but issues will arise if the user resizes his screen. Could technically solve that with a custom event handler onresize and resize the invisible div, but it feels like this would be a wrong approach to the issue.

Code

Chatroom messages container:

<div class="chatroom" id="room-roomname"></div>

Example of a message:

<div class="row">
    <div class="col s12 chat-msg-container">
        <div class="chat-msg">
            <span class="default-color">
                Username
            </span><br/>
            <span>
                Message
            </span>
        </div>
        <div class="chat-msg-image">
            <img class="userImg" src="">
        </div>
    </div>
</div>

Question
I'm looking for the correct approach to do this. How to append a div at the visual bottom of a div?

Answer 1

Using translateY with fixed whole msg container:

var msgRow = `<div class="row">
    <div class="col s12 chat-msg-container">
        <div class="chat-msg">
            <span class="default-color">
                Username
            </span><br/>
            <span>
                Message {{num}}
            </span>
        </div>
        <div class="chat-msg-image">
            <img class="userImg" src="">
        </div>
    </div>
</div>
`;

var scrollbox = document.getElementById('scroll-box');
var chatrooms = document.querySelectorAll('.chatroom');
var chatbox = document.getElementById('chat');

var i = 0;
var id = setInterval(function() {
  let room = chatrooms[i % 2];
  room.innerHTML += msgRow.replace('{{num}}', i);
  if (i == 0 || i == 1) room.classList.add('active');
  if (i == 3) window.clearInterval(id);
  i++;
}, 1000);

#chatrooms {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  border: 1px solid red;
  overflow: hidden;
}

#scroll-box {
  height: 170px;
  overflow-y: scroll;
  display: flex;
}

#chat.container {
  margin-top: auto;
}

.chatroom {
  align-self: flex-end;
  transform:translateY(100%);
  transition: transform 0.5s ease-in;
}

.chatroom.active {
  transform: translateY(0%);
}

.chat-msg-container {
  background-color: lightgrey;
  margin-bottom: 10px;
  animation: animateElement ease-in .5s;
  animation-iteration-count: 1;
}

@keyframes animateElement{
  0% {
    transform:  translateY(100%);
  }
  100% {
    transform:  translateY(0%);
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div id="chatrooms">
  <div id="scroll-box">
    <div id="chat" class="container">
      <div class="row">
        <div class="chatroom col-6"></div>
        <div class="chatroom col-6"></div>
      </div>
    </div>
  </div>
</div>