CSS网格行最大高度1fr，滚动内容-CSSGridrowmaxheight1fr,scrollcontent

2  

Each row in the grid (except for the headers) is set to 1fr height. That means each row will consume an equal proportion of free space in the container.

网格中的每一行(除了页眉)被设置为1fr高度。这意味着每一行将在容器中消耗相同比例的空闲空间。

Just note that fr sizing doesn't actually define a length – either width or height. With fr you are simply distributing free space.

只需注意，fr大小实际上并不定义长度——无论是宽度还是高度。对于fr，你只是在分配自由空间。

But for the overflow property to work, an actual height must be defined:

但要使溢流属性起作用，必须定义实际高度:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

为了使溢出具有效果，块级容器必须具有设置高度(高度或最大高度)或设置为nowrap的空白。

^{source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Therefore, consider using actual heights as opposed to space distribution. Here's an example:

因此，考虑使用实际高度而不是空间分布。这里有一个例子:

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, 175px);  /* adjusment */
  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 {
  height: 175px;  /* new */
  border: solid grey;
  border-width: 0 1px 1px 0;
}

.header { /* new */
  height: 20%;
  background-color: yellow;
}

.content {
  height: 80%; /* new */
  overflow-y: auto;
  background-color: aqua;
}

.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
    

  

revised demo

修改后的演示

1  

It looks like if you set the header to position: fixed, set calc(100%/7) and give it a non-transparent background. Set .day to overflow-y:auto and give your .content a margin-top that seems to work as well as keeping the calender fluid to the browser height.

如果将标题设置为:fixed, set calc(100%/7)，并赋予它一个不透明的背景。设置.day为overflowy:auto，并给你的.content设置一个有边距的顶部，它可以让日历保持在浏览器的高度。

If it's important for the header to be the full width of the day block with borders you can add your current border properties to only the right side and add box-sizing: border-box

如果消息头的宽度必须是带有边框的day块的宽度，那么您可以将当前的边框属性只添加到右边，并添加box尺寸:border-box

.header{
  position:fixed;
  background: white;
  width: calc(100%/7);
  border: solid grey;
  border-width: 0 1px 0 0;
  box-sizing: border-box;
}

.day {
  border: solid grey;
  border-width: 0 1px 1px 0;
  overflow-y: auto;
}

.content {
  margin-top: 20px;
}

Demo

演示