Добавлять div -ы снизу вверх, а не сверху вниз

Question

Делаю мессенджер. Мне нужно чтобы сообщения добавлялись снизу вверх. По умолчанию div c сообщением прижимается к верхнему краю родительского div -a, а мне нужно чтобы он прижимался к нижнему краю, и последующие сообщения должны идти одно за другим, снизу вверх, а не сверху вниз.

Код:

<div class="messenger-messages-body overflow-auto">
<div class="messenger-message">
    <div class="messenger-message-body-text">
        Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
    </div>
</div>

<div class="messenger-message">
    <div class="messenger-message-body-text">
        Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
    </div>
</div>

<div class="messenger-message">
    <div class="messenger-message-body-text">
        Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
    </div>
</div>

<div class="messenger-message">
    <div class="messenger-message-body-text">
        Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
    </div>
</div>

.messenger-messages-body {
    height: 75vh;
}

.messenger-message {
    position: relative;
    float: left;
    margin-top: 20px !important;
    margin-right: 20px !important;
    bottom: 0;
}

Answer 1

const submitButton = document.querySelector('.messenger-message-submit');
submitButton.addEventListener('click', () => {
  const messageViewport = document.querySelector('.messenger-messages-viewport');
  const messagesBody = document.querySelector('.messenger-messages-body');
  const messageInput = document.querySelector('.messenger-message-input');
  let messageItem = document.createElement('div');
  messageItem.classList.add('messenger-message');
  messagesBody.appendChild(messageItem);
  let messageText = document.createElement('div');
  messageText.classList.add('messenger-message-body-text');
  messageText.innerText = messageInput.value;
  messageInput.value = '';
  messageItem.appendChild(messageText);
  messageItem.scrollIntoView({
    behavior: "smooth"
  });
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  margin: 0;
  font-family: sans-serif;
}

button {
  font: inherit;
}

.messenger {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px;
  box-sizing: border-box;
}

.messenger-messages-viewport {
  overflow: hidden scroll;
  flex: 1;
}

.messenger-message {
  margin: 10px 0;
}

.messenger-messages-viewport,
.messenger-control,
.messenger-message-input,
.messenger-message-submit {
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.messenger-messages-viewport {
  border-radius: 2px 2px 0 0;
  padding: 10px 20px;
}

.messenger-control {
  display: flex;
  gap: 20px;
  border-top: none;
  padding: 20px;
  border-radius: 0 0 2px 2px;
}

.messenger-message-input {
  border-radius: 4px;
  flex: 1;
  padding: 10px;
}

.messenger-message-submit {
  color: white;
  font-weight: 600;
  background-color: #0d6efd;
  border: none;
  border-radius: 4px;
  padding: 10px 30px;
}

.messenger-message-submit:hover {
  background-color: #03f;
}

<div class="messenger">
  <div class="messenger-messages-viewport">
    <div class="messenger-messages-body">

      <div class="messenger-message">
        <div class="messenger-message-body-text">
          Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст
          текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
        </div>
      </div>

      <div class="messenger-message">
        <div class="messenger-message-body-text">
          Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст
          текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
        </div>
      </div>

      <div class="messenger-message">
        <div class="messenger-message-body-text">
          Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст
          текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
        </div>
      </div>

      <div class="messenger-message">
        <div class="messenger-message-body-text">
          Текст текст Текст текст Текст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст
          текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текстТекст текст Текст текст
        </div>
      </div>
    </div>
  </div>

  <div class="messenger-control">
    <input class="messenger-message-input" type="text">
    <button class="messenger-message-submit">Отправить</button>
  </div>
</div>

БЛОГ НА HUSL

Добавлять div -ы снизу вверх, а не сверху вниз

Ответы (1 шт):