How can I prevent overflow of nested grid's content of div?

Question

I would like to nest a grid within another grid, and have a tall content box within the nested grid's content div. However no matter I set the overflow property of this content div to scroll, the content box grows causing the outer grid to exceed the viewport. So the viewport gets a scrollbar. The scrollbar of the content div is present but disabled.

// html
<div class="outergrid">
  <div class="row1">
  Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
    Inner Grid Header
    </div>
    <div class="box">
    Tall Box
    </div>
  </div>
</div>

// style scss
*{
  padding: 0px;
  margin: 0px;
}

.outergrid {
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 10px;
  background-color: #0ff;
  div {
    background-color: #afa;
  }
}
.row1{
  grid-row: 1;
}
.row2{
  grid-row: 2;
  display: grid;
  grid-template-rows: 50px 100%;
  grid-gap: 5px;
  .header {
    grid-row: 1;
    background-color: #ffa;
  }
  .contentbox {
     grid-row: 2;
     overflow: scroll;
     .tallcontent {
       background-color: #89f;
       height: 1000px;
     }
  }
}

screenshot highlighting the problem

100% of what? Your percentage row heights aren't working because they're not being used properly. stackoverflow.com/a/31728799/3597276 — Michael Benjamin
– Michael Benjamin, Commented Feb 10, 2022 at 23:42

Oleg Barabanov · Accepted Answer · 2022-02-10 22:08:26Z

1

If I understood you correctly, then perhaps this solution (pure CSS, without SCSS) below can help you. The solution is to enforce a constraint on the height of the parent elements.

* {
  padding: 0px;
  margin: 0px;
}

.outergrid {
  --grid-gap: 10px;
  display: grid;
  grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
  grid-gap: var(--grid-gap);
  background-color: #0ff;
  max-height: 100vh;
}

.outergrid div {
  background-color: #afa;
}

.row1 {
  grid-row: 1;
}

.row2 {
  --grid-gap: 5px;
  grid-row: 2;
  display: grid;
  max-height: 100%;
  grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
  grid-gap: var(--grid-gap);
}

.row2 .header {
  grid-row: 1;
  background-color: #ffa;
}

.row2 .contentbox {
  grid-row: 2;
  overflow: scroll;
}

.row2 .contentbox .tallcontent {
  background-color: #89f;
  height: 1000px;
}

<div class="outergrid">
  <div class="row1">
    Outer Grid Header
  </div>
  <div class="row2">
    <div class="header">
      Inner Grid Header
    </div>
    <div class="contentbox">
      <div class="tallcontent">
        Tall Content
      </div>
    </div>
  </div>
</div>

edited Feb 10, 2022 at 22:08

answered Feb 10, 2022 at 13:08

Oleg Barabanov

2,7622 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vuetsexpress Over a year ago

wow, this is quite complicated, I have to digest how it works, just a quick insight: you set the max-height of the outercontainer twice, may be this is a remnant of you experimeting with it, so it must be the case that the second value is what you meant ( 100vh )

vuetsexpress Over a year ago

yes, I could make it work in my actual complicated use case too, thanks a lot, so the takeaway is setting max-height to 100% on the inner grid, and using calc to manually calculate height starting from 100%

Oleg Barabanov Over a year ago

@vuetsexpress, Thank you for attention. I corrected the example and left only max-height: 100vh which was taken as an example, which does not allow the element to stretch more than necessary and therefore the internal elements cannot fit and they have scrolling enabled. As a result, in order for an element's inner scroll to appear, parent elements at a certain level (if necessary, up to body and html) must be strictly limited in size.

Collectives™ on Stack Overflow

How can I prevent overflow of nested grid's content of div?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related