In this code example, I have created a scrollable container with a flexible nesting structure.
https://jsfiddle.net/n3vctjr4/
.container {
width: 300px;
height: 500px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.static {
padding: 1rem;
background: red;
}
.flexible {
display: flex;
flex-direction: column;
min-height: 0;
}
.flexible div {
display:flex;
flex-direction: column;
min-height: 0;
}
.overflow {
overflow: auto;
}<!-- Container element -->
<div class="container">
<!-- Non-flexible container -->
<div class="static">HEADER</div>
<!-- Flexible container -->
<div class="flexible">
<!-- Nested containers -->
<div class="nesting-1">
<div class="nesting-2">
<div class="nesting-3">
<div class="nesting-4">
<div class="nesting-5">
<!-- Scrollable container -->
<div class="nesting-6 overflow">
<br> <br> <br> <br> <br> <br> <br> <br> <br>
scroll here
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
end
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Non-flexible container -->
<div class="static">FOOTER</div>
</div>Are there any alternative solutions that are more efficient and easier than applying min-height and display:flex individually on each div in the "flexible" hierarchy up to the top element?