I am trying to learn some React and CSS and I am struggling with one thing.

I am trying to create a chat page , but when there are many messages , the message – container pushes down the input box.
React code:

const message = useRef()
function submit(e) {
    e.preventDefault();

    addMessage(msgBox => [...msgBox , message.current.value])

}

const [msgBox, addMessage] = useState(["John: Hi"])
 return (
        <>
        <div className = "chat-container">
            {msgBox.map((msg) => {
                return <div><span>{msg}</span><br/></div>
            })}
        </div>
        <div className = "message-box">
        <Form onSubmit = {submit}>
        <input ref = {message} />
        <Button type = "submit" className = "mb-1 position-fixed">
            Send
        </Button>
        </Form>
        </div>
        </>
    )

CSS :

* {
  margin: 0;
  padding: 0;
}
.chat-container {
  min-height: 90vh;
  min-width: 80%;
  position: relative;
}
span {
  padding: 60px;
}
.message-box {
  min-height: 10vh;
  position: absolute;
}

.message-box > form > input {
  margin-left: 60px;
}

I tried to play around with the position properties, but I coudn’t make it happen.I want the message-box to not be pushed down by chat-container when there are too many messages.

I want when there are too many messages the chat-container not to overlap at all the message-box and be able to scroll there.

Any help?

>Solution :

Set max-height on .chat-container. You can use another value instead of 500px. Play with it to find a value that matches your design.

.chat-container {
  max-height: 500px 
  overflow: scroll
}