I struggled to articulate the problem I am facing, and I apologize if it's still unclear
So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> itself, not on the "main window".
This is the desired appearance:
https://i.stack.imgur.com/Y7UAm.png
However, this is what currently happens:
https://i.stack.imgur.com/AybkA.png
To achieve the first screenshot, I set max-height: 80vh on my lists, but this is not an ideal solution as it only works for a specific screen size.
Here's the link to the codepen, simply click on "Add more items" a few times to see the issue
Below is the CSS for the main section and the basic HTML structure, in case you prefer not to check the codepen
<div class="room-wrapper">
<div><button class="btn btn-primary add-more-btn">Add more items</button></div>
<div class="room-content">
<div class="left-card app-card">
<div class="left-card-wrapper">
<div>
<h3>Left Card</h3>
<hr>
</div>
<ul class="my-list"></ul>
</div>
</div>
<div class="main-card app-card"></div>
<div class="right-card app-card">
<div class="players-wrapper">
<div>
<h3>Right Card</h3>
<hr>
</div>
<ul class="my-list"></ul>
</div>
</div>
</div>
</div>
.room-wrapper {
display: flex;
flex-flow: column;
height: 100%;
padding: 10px;
}
.room-content {
flex: 1 1 auto;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.my-list {
overflow-y: auto;
/* This would "solve" it, but only for a very
specific window size, this is what I used for
the first screenshot
max-height: 80vh;
*/
}