CSS Grid row max height 1fr, scroll content

Question

I have a 'calendar' layout using the following css-grid styles:

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
  width: 100%;
  height: 100%;
}

(Codepen https://codepen.io/joelhoward0/pen/vJLmWK)

The first two rows are a 'controls' header and days of the week headers, followed by divs for each day in the month:

Each day has a .header and .content div. I want the .header div to take up 1/5 of the height of the row, and the content to take up 4/5 and scroll if the content overflows.

However, any combination of styles I've tried just leads to .content growing, shrinking the other grid rows to compensate. I assume this is due to the use of 1fr on the container grid-template-rows.

Is it possible to achieve a max height of 4/5 of the grid row height, which is 1/6 of the vertical space available, on the .content div?

(Note: setting overflow-y: auto; on .day achieves what I want, but the header is included in the scrolling area. Setting overflow-y: auto; on .content doesn't seem to do anything.)

user_630170 · Answer

Although @MichaelB's response is technically correct, I have found that you can actually do it without resorting to specifying heights manually. And it's dead simple to do it too.

In addition to adding overflow:auto to the grid-item you want scrollbars on, you also need to add an overflow:auto to the parent of that grid-item.

https://codepen.io/kumarharsh/pen/jejGMm?editors=1100

html,
body {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: solid grey;
  border-width: 1px 0 0 1px;
  position: relative;
}

.dayHeader {
  border: solid grey;
  border-width: 0 1px 1px 0;
}

.day {
  border: solid grey;
  border-width: 0 1px 1px 0;
  overflow: auto; /* added overflow here! */
}

.content {
  overflow-y: auto;
}

.controls {
  grid-column-start: 1;
  grid-column-end: 8;
  border: solid grey;
  border-width: 0 1px 1px 0;
}


  July 2017
  Sunday
  Monday
  Tuesday
  Wednesday
  Thursday
  Friday
  Saturday
  
    25
    
      this is a lot of content that I want to have scroll instead of just stretching the grid row and forcing the other rows to be smaller to compensate for this one's increased size due
    
  
  
    26
    
  
  
    27
    
  
  
    28
    
  
  
    29
    
  
  
    30
    
  
  
    1
    
  
  
    2
    
  
  
    3
    
  
  
    4
    
  
  
    5
    
  
  
    6
    
  
  
    7
    
  
  
    8
    
  
  
    9
    
  
  
    10
    
  
  
    11
    
  
  
    12
    
  
  
    13
    
  
  
    14
    
  
  
    15
    
  
  
    16
    
  
  
    17
    
  
  
    18
    
  
  
    19
    
  
  
    20
    
  
  
    21
    
  
  
    22
    
  
  
    23
    
  
  
    24
    
  
  
    25
    
  
  
    26
    
  
  
    27
    
  
  
    28
    
  
  
    29
    
  
  
    30
    
  
  
    31
    
  
  
    1
    
  
  
    2
    
  
  
    3
    
  
  
    4
    
  
  
    5

Best of all, It works in all browsers (tested in Firefox, Chrome, and Edge), so it's likely not a hack, but an intended behaviour.

Why does this happen?

I can't find a clear answer in the spec yet, but I'll keep looking and update here when I have something concrete.

Update

Do read @Victoria's followup comment: CSS Grid row max height 1fr, scroll content which has another way to do it - I'd recommend you use that way if your design allows it.

CSS Grid row max height 1fr, scroll content

3 Answers

Why does this happen?

Update