How to enable vertical scrolling with flexible height?

I want to create a chat window, that has vertical scrolling if the content oveflows.I have a flexbox containing 3 items. Title, The .chat chatbox and an input.The .chat chatbox has Flex: 1; And I bellive it has to have Flex: 1 cause different screensizes.(Althrough this is a school project, that will be shown on a single device ever. So no reall responsiveness nescesary.)

When I overflow the .chat container it just stretches.If i set max-height: 500px; to the .chat container it oweflows, but I need it to fill the space between the two flex items.

I'm not sure, how far in the HTML should I go... It's a pretty big React project.I will post only the section with the problem and can link to the whole code if nescesary.

EDIT: Here is the whole project if for context.https://drive.google.com/file/d/1t7fNQKY2ZVbSgQ-GqqfxbHSbrcYRJFzO/view

Screenshot of the whole app: https://imgur.com/a/5zKc9qJ

<div className='Clara-wrapper'><div className='chat-side'><div className='chat-info'><p className='chat-title'>                Currently chatting with: <span>Clara</span></p></div> { /* Chat info */ }<div className='chat'><p className='assistant'>This is a Long message ................. </p><p className='user'>This is a message</p><p className='assistant'>This is a second message</p><p className='assistant'>This is a Long message ................. </p><p className='user'>This is a message</p><p className='assistant'>This is a Long message ................. </p><p className='assistant'>This is a second message</p><p className='user'>This is a message</p><p className='assistant'>This is a second message</p></div> { /* Chat respones */ }<div className='chat-input'><div className='input-container'><input id='ai-input' placeholder='Message Clara...'/><div className='send' title='Send message'></div></div></div> { /* Chat input */ }</div> { /* Chat side */ }<div className='face-side'>           { /* Other side content */ }</div> { /* Face side */ }</div> { /* Clara Wrapper */ }

.Clara-wrapper {    position: relative;    margin: 53px 40px 27px 40px;    height: calc(100% - 80px);    display: grid;    grid-template-columns: 52% auto;    grid-template-rows: 1;    gap: 15px;}.Clara .chat-side {    display: flex;    flex-direction: column;    height: 100%;}/* chat */.Clara .chat {    background-color: rgba(255, 255, 255, 0.05);    border-radius: var(--clara-border-radius);    position: relative;    overflow-y: auto;    width: 100%;    flex: 1; }.Clara .chat::before {    content: "";    position: absolute;    top: 0; left: 0;    width: 100%;    height: 300px;    pointer-events: none;    background: linear-gradient(to bottom, rgba(29, 33, 32, 0.8), rgba(29, 33, 32, 0));}.Clara .chat > p {    width: fit-content;    max-width: 75%;    border-radius: var(--clara-border-radius);    background-color: var(--clara-dark-1);    padding: var(--clara-padding-chat);    box-shadow: var(--clara-button-shadow);}.Clara .chat .assistant {    background-color: var(--clara-main);    margin-left: auto;}