I am facing an issue with the layout I have created. It consists of a scrollable list of items in the center, with additional content above and below it in a column. The challenge is to make the list occupy all available empty space within the column without specifying a fixed height. It should scroll when there is insufficient space to accommodate all the items.
Here you can view a JSFiddle demonstration of the situation.
The problem arises when adding numerous items to the scroller. Instead of staying at its original size and scrolling the overflowing contents (as intended), the entire scroller expands to fit all the contents. This occurs even though overflow-y: scroll is set!
You can fix the problem by setting the scroller height to 0, allowing the items to scroll as intended while maintaining the original height prior to adding extra items.
But why does this work? Can someone provide an explanation for this behavior? Are there any potential consequences to this "solution" that I may not be aware of?
<div class="column">
<div class="title">Header</div>
<div class="scroller">
<div class="item">Child</div>
<div class="item">Child</div>
</div>
<div class="title">Footer</div>
</div>
,
.column {
display: flex;
flex-direction: column;
height: 200px;
}
.title {
height: 50px;
flex-shrink: 0;
}
.scroller {
flex-grow: 20;
flex-shrink: 0;
overflow-y: scroll;
}
.item {
height: 20px;
margin-top: 2px;
}