<div class="box">
  <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>

<button>追加</button>
.box {
  width: 300px;
  height: 200px;
  overflow: auto;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
}

  .message {
    background: #fff;
    border-radius: 10px;
  }
  document.querySelector("button").addEventListener("click", () => {
    const message = document.createElement("div");
    message.classList.add("message");
    message.textContent = "lorem ipsum";
    document.querySelector(".box").appendChild(message);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.