I have the following setup:
.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>now as you can see, the green area is way larger than the whole .page element. What I am trying to achieve is to make the green area fill the left space on the page. I achieved that with flex: 1 1 auto on .c and with display: flex, flex-flow: column on the main element. Additional to that, I need the green area to be scrollable, when the children (here the lightblue rectangle .b) is too large to fit in it without overflow. But setting overflow: scroll on the green element doesnt have any effects and result in the given code sample. If anyone could help me out on how to achieve my goal, I would be very grateful.
Of course this can be achieved by calculating the remaining height via JavaScript, but Id like to know if theres a css-only method as well.
.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: 100%;
flex: 1 1 auto;
}
.c {
width: 100%;
background-color: lightgreen;
padding: 10px;
max-height: 100%;
overflow: scroll;
flex: 1 1 auto;
box-sizing: border-box;
}
.b {
width: 80%;
height: 200vh;
background-color: lightblue;
}
.scroll-elem-container {
flex-grow: 1;
overflow: hidden;
}<div class="page">
<header>
HALLO
</header>
<main>
<div class="container-dynamic">
<p>This container has dynamic height</p>
</div>
<div class="scroll-elem-container">
<div class="container-fill">
<div class="c">
<div class="b">
</div>
</div>
</div>
</div>
</main>
</div>