Allow CSS Grid to grow vertically with window, filling remaining space - html

Question

I want to grow a grid to fill the remaining vertical space. There are a couple divs above a calendar of fixed height, and I'd like those to remain a fixed height. As the window grows vertically, I'd like only the calendar to change, with each row growing evenly, stopping at the bottom of the window with no scrollbars.
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
html,
body {
background: #92bde7;
color: #485e74;
font-family: Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
}
.selection {
padding: 5px;
}
.header {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.header>div {
padding: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* this is the element that needs to stretch to remaining available window space */
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
/* these elements should stretch evenly as the window grows */
.calendar>div {
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.5em;
min-height: 100px;
}
.prev>div,
.next>div,
.date>div {
text-align: left;
}
.prev,
.next {
background: #c9e6ff;
color: #666;
}
.date {
background: #f9feff;
}
<div class="selection">
<h1><a class="back">❮</a> 6 / 2018 <a class="forward">❯</a></h1>
</div>
<div class="header">
<div>Sunday</div>
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
</div>
<div class="calendar">
<div class="prev">30</div>
<div class="prev">31</div>
<div class="date">1
<div class="item">Stuff to do...</div>
</div>
<div class="date">2</div>
<div class="date">3</div>
<div class="date">4</div>
<div class="date">5</div>
<div class="date">6</div>
<div class="date">7</div>
<div class="date">8</div>
<div class="date">9</div>
<div class="date">10</div>
<div class="date">11</div>
<div class="date">12</div>
<div class="date">13</div>
<div class="date">14</div>
<div class="date">15</div>
<div class="date">16</div>
<div class="date">17</div>
<div class="date">18</div>
<div class="date">19</div>
<div class="date">20</div>
<div class="date">21</div>
<div class="date">22</div>
<div class="date">23</div>
<div class="date">24</div>
<div class="date">25</div>
<div class="date">26</div>
<div class="date">27</div>
<div class="date">28</div>
<div class="date">29</div>
<div class="date">30</div>
<div class="next">1</div>
<div class="next">2</div>
<div class="next">3</div>
</div>

Answer 1

Try wrapping the whole thing a in a flex container, then using flex properties to set your lengths. Something like this:
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.selection {
flex: 0 0 50px; /* flex-grow, flex-shrink, flex-basis */
}
.header {
flex: 0 0 25px;
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendar {
flex: 1; /* dynamic length; consumes all remaining space */
overflow: auto;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 1fr;
}
jsFiddle demo

Answer 2

There are several ways to accomplish this. One way to do this is to leverage vh units. I made a CodePen with your code and made a slight tweak to the height of your rows in CSS:
.calendar > div {
...
height: calc(20vh - 17px)
}
This means that each row will take up 20% of the vertical space of the screen minus 17px, which allows for the header. This assumes there will always be five rows.