I am attempting to create a grid with one column and two rows, where the second row expands to fill all available space. This code works in Firefox 58 but fails in Chrome 63. Can anyone spot an error in the code?
<div id="app">
<div id="app-hdr"></div>
<div id="app-body"></div>
</div>
html, body, #app {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
#app {
display: grid;
grid-template-rows: 60px auto;
grid-template-columns: auto;
grid-template-areas:
"header"
"content";
background: #F00;
}
#app-hdr{
grid-area: header;
background: #AAA;
}
#app-body{
grid-area: content;
background: #666;
}