CSS Grid element is expanding outside of the container

Question

I'm using CSS grid and attempting to do a layout with it. I have multiple levels of grids, as I'm using react and want a different layout on different pages. There doesn't seem to be a way to keep the inner grid from expanding outside the container that it is set to use by the parent grid, so the scrolling on it is messed up.

I'd rather not have to use hardcoded values for the offsets on the headers, as that's why I'm using grid in the first place. Any ideas on how to make this work properly? (I'm trying to make the scrollbar on the .body be the only part of the page that scrolls)

body {
  margin: 0;
}

.app {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.mainheader {
  font-size: 20px;
  padding: 16px;
}


.page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page > div {
  padding: 16px;
}

.subheader {
  background: red;
}
.body {
  background: blue;
  overflow-y: scroll; /* This scroll does nothing, as the parent does not lock to the 1fr set in .app */
}
.footer {
  background: green;
}

<div class="app">
  <div class="mainheader">This is the main header</div>
  <div class="page">
    <div class="subheader">This is the subheader</div>
    <div class="body">
      <div>Body content #1</div>
      <div>Body content #2</div>
      <div>Body content #3</div>
      <div>Body content #4</div>
      <div>Body content #5</div>
      <div>Body content #6</div>
      <div>Body content #7</div>
      <div>Body content #8</div>
      <div>Body content #9</div>
      <div>Body content #10</div>
      <div>Body content #11</div>
      <div>Body content #12</div>
      <div>Body content #13</div>
      <div>Body content #14</div>
      <div>Body content #15</div>
      <div>Body content #16</div>
      <div>Body content #17</div>
      <div>Body content #18</div>
      <div>Body content #19</div>
      <div>Body content #20</div>
      <div>Body content #21</div>
      <div>Body content #22</div>
      <div>Body content #23</div>
      <div>Body content #24</div>
      <div>Body content #25</div>
      <div>Body content #26</div>
      <div>Body content #27</div>
      <div>Body content #28</div>
      <div>Body content #29</div>
      <div>Body content #30</div>
    </div>
    <div class="footer">This is the footer</div>
  </div>
</div>

try set `min-height: fit-content` to `.page` – s.kuznetsov Jun 09 '21 at 18:27 — s.kuznetsov, Jun 09 '21 at 18:27
@s.kuznetsov min-height:0 should be enought – Temani Afif Jun 09 '21 at 19:47 — Temani Afif, Jun 09 '21 at 19:47
min-height: 0 did the trick! – Josh Bacon Jun 10 '21 at 16:09 — Josh Bacon, Jun 10 '21 at 16:09
@TemaniAfif, yes, your advice is good. – s.kuznetsov Jun 10 '21 at 16:53 — s.kuznetsov, Jun 10 '21 at 16:53

score -1 · Answer 1 · answered Jun 09 '21 at 18:35

a better way to do this would be with flex. Here's how you can do it.

body {
  margin: 0;
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.mainheader {
  font-size: 20px;
  padding: 16px;
}


.page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.page > div {
  padding: 16px;
}

.subheader {
  background: red;
}

.body {
background: blue;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.footer {
  background: green;
}

<div class="app">
  <div class="mainheader">This is the main header</div>
  <div class="page">
    <div class="subheader">This is the subheader</div>
    <div class="body">
      <div>Body content #1</div>
      <div>Body content #2</div>
      <div>Body content #3</div>
      <div>Body content #4</div>
      <div>Body content #5</div>
      <div>Body content #6</div>
      <div>Body content #7</div>
      <div>Body content #8</div>
      <div>Body content #9</div>
      <div>Body content #10</div>
      <div>Body content #11</div>
      <div>Body content #12</div>
      <div>Body content #13</div>
      <div>Body content #14</div>
      <div>Body content #15</div>
      <div>Body content #16</div>
      <div>Body content #17</div>
      <div>Body content #18</div>
      <div>Body content #19</div>
      <div>Body content #20</div>
      <div>Body content #21</div>
      <div>Body content #22</div>
      <div>Body content #23</div>
      <div>Body content #24</div>
      <div>Body content #25</div>
      <div>Body content #26</div>
      <div>Body content #27</div>
      <div>Body content #28</div>
      <div>Body content #29</div>
      <div>Body content #30</div>
    </div>
    <div class="footer">This is the footer</div>
  </div>
</div>

CSS Grid element is expanding outside of the container

1 Answers1