Limit div height with Overflow:Scroll through parent with overflow:hidden

Question

I have the following CSS problem:

.outer{
  height: 100%;
  overflow: hidden;
 }

.inner{
  overflow-y: scroll;   
}

<div id="outer"> 
  <div>some dynamic content with unknown height</div> 
  <div id="inner">  
    some dynamic content with unknown height
    </div>
  </div>

So i want the outer div to fit the height of the window, but my inner div should be scrollable. Problem is, i cant give the inner div a fixed height value because it is filled with dynamic content. Overflow-Scroll apparently does need a height value in order to work, which i can't provide. My only (theoretical) limitation to the inner div's height is the outer div. I can't use a height relative to the parents height, because i do not know the height of the divs that come before.

The inner div needs a height that the scroll window will be, not the content. Otherwise there would be no need to scroll in the first place! Try 100% — le3th4x0rbot, Jan 23 '17 at 19:00
Yes, i do not know the height of the scroll window though. I have some dynamic content before the scroll window and i want the scroll window to fit the rest of its parent — Heady, Jan 23 '17 at 19:01
You want the `#inner` to take the remaining height and if the dynamic content in the div above is high enough, it will push the `#inner` down so that it won't be visible? — Marvin, Jan 23 '17 at 19:32
It will not come to that, because if the screen height is that low i will display a different layout anyway. The dynamic content on the top can be zero to ~ 500px , so it is limited. — Heady, Jan 23 '17 at 19:56

score 5 · Accepted Answer · answered Jan 23 '17 at 19:34

You can use flexbox to solve that

Note, I changed the id to class to match your CSS rules

html, body {
  margin: 0;
}
.outer {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: lightgray;
}
.inner {
  flex: 1;
  overflow-y: scroll;
  background: lightgreen;
}

<div class="outer">
  <div>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
  </div>
  <div class="inner">
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
    some dynamic content with unknown height<br>
  </div>
</div>

That works. I tried it before with angular materials "columns" and it did not work, because the inner div would just "crunch" it's contents. But with custom flex, like you used, it works . Thanks. — Heady, Jan 23 '17 at 19:59

Limit div height with Overflow:Scroll through parent with overflow:hidden

1 Answers1

Linked