chatbox html-css not focusing on recent message

Question

I am creating the HTML for a chat, problem is when there is an scroll then the chat appears from top ... showing first message instead of recent message.

<div id="chat-wrapper">
  <div id="chat-container">
    <ul>
      <li class="you">Hello</li>
      <li class="me">Hello</li>
      <li class="you">How are you?</li>
      <li class="me">I am fine</li>
      <li class="me">How are you</li>
      <li class="you">I am fine also</li>
      <li class="me">So, whats up</li>
      <li class="you">Nothing much, <br /> you tell</li>
      <li class="me">This is recent message</li>
    </ul>
  </div>
</div>

CSS

#chat-wrapper {
  background:#777;
  min-width:300px;
  max-width:600px;
  margin:10px auto;
  height:250px;
  position:relative;
  overflow: hidden;
}
#chat-container {
  position:absolute;
  top:auto;
  bottom:0;
  left:0;
  width:100%;
  overflow-y:auto;
  padding:5px 0;
}
#chat-container ul {
  list-style:none;
  margin:0;
  padding:0;
}
#chat-container li {
  display:block;
  padding:20px 10px 5px;
  position:relative;
  margin:15px 5px 10px;
  background-color:#000;
  border-radius:4px;
}
#chat-container li::before {
  position:absolute;
  padding:2px 5px;
  line-height:1em;
  color:black;
  top:-7px;
  left:15px;
  font-size:10px;
}
#chat-container li.you {
  color:yellow
}
#chat-container li.me {
  color:green;
  text-align:right;
}
#chat-container li.you::before {
  content:'YOU';
  background:yellow;
}
#chat-container li.me::before {
  content:'ME';
  left:auto;
  right:15px;
  background:green;
}

https://codepen.io/alikhan999/pen/BaWYXwO

If i provide position top or height to container than scroll appears but shows first message instead of recent message.