Scrollable flexed content inside scrollable flexed content

Question

I tried to make this question as generic as possible. Essentially, I have a vertical (column) flex layout inside another vertical flex layout. In the outer layout, I'd like the main area ( outer-main , in my example) to fill remaining vertical real estate. In the inner layout, I'd also like the main area ( inner-main ) to fill remaining vertical real estate.

This is working properly on the outer layout, but in the inner layout, I'd like just the main area ( inner-main ) to be scrollable, not the entire layout. So inner-header should always be visible, with just inner-main filling remaining space and being scrollable.

How can I tweak my CSS to achieve this?

The snippet is easier to see when run in full-screen

 .outer { border: 1px solid red; box-sizing: border-box; display: flex; flex-direction: column; max-height: 60vh; padding: 5px; } .outer > div { border: 1px solid purple; flex: 0 0 auto; } .outer .outer-header { height: 10vh; } .outer .outer-main { display: flex; flex-direction: column; flex: 0 1 auto; overflow: auto; padding: 5px; } .outer .outer-main > div + div, .outer > div + div { margin-top: 5px; } .outer .outer-main > div { border: 1px solid green; flex: 0 0 auto; } .outer .outer-main .inner-main { flex: 0 1 auto; } 

 <div class="outer"> <div class="outer-header">Outer Header</div> <div class="outer-main"> Outer Main <div class="inner-header">Inner Header</div> <div class="inner-main"> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> </div> </div> </div> 

Answer 1

Alright, I simply needed to add overflow: auto to the inner-main div, and that allows it to scroll. See updated snippet below.

 .outer { border: 1px solid red; box-sizing: border-box; display: flex; flex-direction: column; max-height: 60vh; padding: 5px; } .outer > div { border: 1px solid purple; flex: 0 0 auto; } .outer .outer-header { height: 10vh; } .outer .outer-main { display: flex; flex-direction: column; flex: 0 1 auto; overflow: auto; padding: 5px; } .outer .outer-main > div + div, .outer > div + div { margin-top: 5px; } .outer .outer-main > div { border: 1px solid green; flex: 0 0 auto; } .outer .outer-main .inner-main { flex: 0 1 auto; overflow: auto; } 

 <div class="outer"> <div class="outer-header">Outer Header</div> <div class="outer-main"> Outer Main <div class="inner-header">Inner Header</div> <div class="inner-main"> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> <div>Inner Main Content</div> </div> </div> </div>