Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
5 replies
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>

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%
Was this page helpful?