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. https://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Feb 10 '22 at 23:42

Oleg Barabanov · Accepted Answer · 2022-02-10T22:08:26.477

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 '22 at 22:08

answered Feb 10 '22 at 13:08

Oleg Barabanov

2,468
2
8
17

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 Feb 10 '22 at 14:19
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%` – vuetsexpress Feb 10 '22 at 16:00
@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. – Oleg Barabanov Feb 10 '22 at 23:21

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

1 Answers1