聊天框 html-css 不关注最近的消息

Question

我正在为聊天创建 HTML，问题是当有滚动时，聊天从顶部出现...显示第一条消息而不是最近的消息。

<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

如果我为容器提供位置顶部或高度，则滚动出现但显示第一条消息而不是最近的消息。