Making an element take 100% height and scrollable

I have a setup similar to:

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2">
    <h1>Header</h1>
    <div class="list">
      <div class="item-1">{...}</div>
    </div>
  </div>
</div>
<style>
  .parent {
    max-height: min(100vh - 101px, 892px);
    overflow-y: auto;
  }

  .child-2 {
    display: flex;
    flex-direction: column;
  }

  .list {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
  }
</style>

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2">
    <h1>Header</h1>
    <div class="list">
      <div class="item-1">{...}</div>
    </div>
  </div>
</div>
<style>
  .parent {
    max-height: min(100vh - 101px, 892px);
    overflow-y: auto;
  }

  .child-2 {
    display: flex;
    flex-direction: column;
  }

  .list {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
  }
</style>

I need the list to take the remaining height of .child-2 yet also be scrollable Currently, the list takes as much height as it needs while being constrained to .parent's height, making .parent's "internal" height increase According to my testing, the issue seems to lie in max-height: 100%

4 Replies

MagicEmperor•8mo ago

My first doubt is the parent class , why does it have max height and not just height, because if u set it to max height , the issue will persist till there are enough list items , but if u set parents height and then inside the child-2 set another wrapper for all the list items and set it's height to 100% with overflow-y : scroll , I think what ur going for will work

AviOP•8mo ago

Funny enough, this sketch actually works, but in my project it doesn't for some reason (although the HTML structure in my project is not you exactly the same) https://codepen.io/avi12641/pen/wvZQpNR

avi12

CodePen

wvZQpNR

...

AviOP•8mo ago

A friend helped me solve it and the solution was setting the parent as display: flex; flex-direction: column and give the list min-height: 0

MagicEmperor•8mo ago

Nice Mark it as solved if it's done

Gaming

Programming

Making an element take 100% height and scrollable