I have searched the internet for this problem, but there are so many variations of this problem that none of the provided solutions work in my case. I have asked ChatGPT and it can't help me either.
Here is my html structure:
<div id="editor"><iframe id="preview" title="editor preview"></iframe><div id="chat-container" class="chat-centered"><div id="chat-header"><span id="chat-title">Bot</span><button id="minimize-button">−</button></div><div id="chat-messages"></div><div id="chat-input"><div id="input-box" contenteditable="true"></div><button id="send-button">Send</button></div></div><button id="chat-toggle-button"></button></div>Here is the relevant css:
#chat-container { color: #333; position: fixed; bottom: 20px; right: 20px; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; width: 100%;}#chat-messages { flex-grow: 1; padding: 10px; padding-bottom: 20vh; overflow-y: auto; display: flex; flex-flow: column nowrap; justify-content: flex-end;}The chat-messages div needs to scroll on overflow. However on every browser I tested it refuses to do this.
I have added height, min-height, position and flex-basis to both child and parent. All with undesired results, and not with the desired result.
I have even tried nesting the div in another, with the outer one 'flexing' and the inner one positioned absolute. To my surprise, that didn't scroll either.
There is clearly something I am not understanding. So, I turn to you.
ps. I have a live version running on patsboemwebsite.nl but you have to click 'Start nu je website' in order to see it.