Chatbox with new messages showing at the bottom and pushing old messages up

I am kinda stuck building the chat container of a chat gpt-like UI. The tricky part is that I want the messages to start from the bottom with new messages pushing the old ones further to the top. The page looks like this:

title / header some text | chat area, stretching the entire available height | | | | first message | second message | third message input field some other text and buttons

The page is always 100% height and has no scroll bar. Only the chat are should show a scroll bar when needed. The page is currently wrapped in a flex container with flex-direction: column.

Approach I

The closes I've been to having the chat area work as expected is by having two nested divs.

#outer {
  margin-top: 40px;
  border: 1px;
  solid lightgray;
  border-radius: 16px;
  height: 50vmin;
  display: flex;
  align-items: end;
  flex-grow: 1;
  overflow: auto;
}

#inner {
  max-height: 100%;
}

<div id="outer">
  <div id="inner">
    <messageOne />
    <messageTwo />
    <messageThree />
  </div>
</div>

The issue I am encountering with this approach is that no matter what I do the scroll bar is always present. It looks like one of the containers is a couple pixels higher than the other and thus the scroll bar is always visible.

Approach II

With this approach when the chat area gets filled with messages they start overflowing the container and horizontal scrollbar appears. I found no way of keeping the container from overflowing.

#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: end;
}

<div id="container">
  <messageOne />
  <messageTwo />
  <messageThree />
</div>

PS: I found that just having display: block on the container almost works as expected. The only thing missing in this case is making the messages start from bottom up. Experimented with absolute position and a lot of other stuff but couldn't quite get it to work.

try adding overflow-y:scroll to #inner container in your first approach and remove overflow auto from #outer