Cannot scroll within container using CSS grid-template

Question

I want to convert a page from having tightly-controlled positioning to grid-template. I am able to display the containers in the right places, but I don't know how to properly set grid-template-rows. grid-properties-not-working-on-elements-inside-grid-container hints at an answer, but I don't think my problem involves grandchildren.

I have two fiddles to demonstrate the problem.

The first is the bad example, where the entire page scrolls. I have tried variations of

grid-template-rows: min-content min-content 90%;

but nothing forces my main container to be the only one that scrolls and resizes, even if I play around with the value in the last row. ("min-content" is fine for the first two rows). Here is the CSS for the main container:

main {
    overflow: auto;
}

The second is the good example, where the main container scrolls and resizes properly when the browser window size is altered, but I would think that the positioning I applied overrides any benefit gained from using a grid template. Here is the CSS for the main container:

main {
    overflow: auto;
    position: fixed;
    top: 72px;
    bottom: 0px;
    left: 200px;
    right: 0px;
    margin-left: 10px;

}

My question:

How do I define the grid-template-rows property while still isolating just the main container in row 3 column 2?

Follow-up: Is there a general resource for grid-templates that I have overlooked and should be reading? I looked at several of the articles SO suggested when I created my original post, but none seemed to address my particular issue.

score 0 · Answer 1 · answered Dec 19 '22 at 18:45

Scrolling containers is not as hard as it seems, based on this article by Michael X. I studied what he did, and adapted it to use grid templates. Other articles on SO talk about grandparents, parents and children, but with no practical examples.

The solution I found is putting any area you want to scroll in a separate subgrid; one grid will not work for the entire page. For example, if I want to scroll a column in a specific row, that row needs a container with its own grid, and that container needs a subcontainer for the column I want to scroll. The content is a separate tag inside of that.

My original post used a page with full-width header, a full-width navigation bar and another row with a fixed table of contents on the left and scrolling contents on the right.

Here is the HTML, with the first two rows left out for simplicity. It focuses on the row of interest:

<html>
<body>
<div id="grid_container">
...
  <div id="body_wrapper">
    <div id="toc_wrapper">
    </div>  <!-- end of toc_wrapper -->
    <main>
      <article>
      ...
      </article>
    </main>  <!-- end of main -->
  </div>  <!-- end of body_wrapper -->
</div>  <!-- end of grid_container -->
</body>
</html>

And here is the CSS to make the third column scroll. Note where and how overflow and display:grid are used. Note also that 1fr is for non-specific sizing:

body {
    overflow: hidden;
}

#grid_container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-areas:
        "pageheader"
        "sitenav"
        "body"
    ;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content 1fr;
}

...

#body_wrapper {
    grid-area: body;
    overflow: hidden;
    display: grid;
    grid-template-areas:
        "toc maincontent"
    ;
    grid-template-columns: 175px 1fr;
}

#toc_wrapper {
    grid-area: toc;
}

main {
    grid-area: maincontent;
    overflow-y: scroll;
}

Cannot scroll within container using CSS grid-template

1 Answers1