how to set overflow scroll on div with unknown height

Question

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.

Answer 1

 .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>