Html – 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;
}