JSFiddle - React, Tailwind, and code Playground

by Yeah

HTML

<div class="container">
  <div class="chat">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
    <p>e</p>
    <p>f</p>
    <p>g</p>
    <p>h</p>
    <p>k</p>
    <p>i</p>
    <p>l</p>
    <p>m</p>
    <p>n</p>
    <p>o</p>
    <p>p</p>
    <p>q</p>
    <p>r</p>
    <p>s</p>
    <p>t</p>
    <p>u</p>
  </div>
</div>

CSS

div {
  border: 1px solid red;
}

.container {
  height: 100px;
  overflow: scroll;
  background-color: transparent;
  position: relative;
}

.chat {
  background-color: green;
  position: absolute;
  width: 100%;
  bottom: 0px;
}