KPC
Kevin Powell - Community•9mo ago
Avi

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
MagicEmperor•9mo 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
Avi
AviOP•9mo 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
...
Avi
AviOP•9mo 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
MagicEmperor•9mo ago
Nice Mark it as solved if it's done

Did you find this page helpful?