The layout I'm working with looks like this:
.page {
width: 360px;
height: 704px;
border: 1px solid red;
}
header {
height: 10%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
main {
height: 90%;
background-color: beige;
width: 100%;
display: flex;
flex-flow: column;
}
.container-dynamic {
width: 100%;
height: 400px;
border: 1px dashed grey;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
p {
text-aling: center;
}
.container-fill {
width: 80%;
border: 1px dashed black;
height: auto;
flex: 1 1 auto;
}
.c {
width: 100%;
background-color: lightgreen;
padding: 10px;
max-height: 100%;
overflow: scroll;
flex: 1 1 auto;
}
.b {
width: 80%;
height: 200vh;
background-color: lightblue;
}<div class="page">
<header>
HALLO
</header>
<main>
<div class="container-dynamic">
<p>This container has dynamic height</p>
</div>
<div class="container-fill">
<p>This container fills up the left space</p>
<div class="c">
<div class="b">
</div>
</div>
</div>
</main>
</div>Currently, the green area extends beyond the boundaries of the .page element. My goal is to have the green area fill the available space on the page. I've managed to achieve this by applying flex: 1 1 auto to .c and using display: flex, flex-flow: column on the main element. However, I also want the green area to be scrollable when its content (in this case, the light blue rectangle .b) exceeds its size. Unfortunately, setting overflow: scroll on the green element hasn't worked as expected based on the code provided. Any assistance in accomplishing my desired outcome would be greatly appreciated.
While one approach could involve calculating the remaining height using JavaScript, I'm interested in learning if there's a CSS-only method to achieve the same result.