I have a flexbox layout kinda like Discord.My list is the messageList with all messages I have.I want to add overflow-y: scroll to it but it doesn't work because I don't have a specific height.Also, I don't want to add a specific height because it should be dynamic.
My solution would be.
max-height: calc(100vh - header.height - send.height)
but it only works if you have specific heights for header and send tho.
is there any other way?
example: https://jsfiddle.net/AvaPLaIN/b7umpgzn/44/
* { margin: 0; padding: 0; box-sizing: border-box;}.container { height: 100vh; width: 100vw; display: flex; flex-direction: column; border: 2px solid black;}.header { width: 100%; border: 2px solid red; min-height: 3rem;}.content { flex: 1; display: flex; border: 2px solid green;}.chatbox { flex: 1; border: 2px solid yellow; display: flex; flex-direction: column;}.members { width: 15rem; border: 2px solid blue;}.list { flex: 1; border: 2px solid grey; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; overflow-y: scroll;}li { width: 100%; border: 1px solid black;}.send { height: 5rem; border: 2px solid purple;}<div class="container"><div class="header"> Header here</div><div class="content"><div class="chatbox"><ul class="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><div class="send"> Send Message here</div></div><div class="members"> Memberlist here</div></div></div>