简单CSS网格在FF中工作，但在Chrome中不工作

我正在尝试制作一个1列2行的网格。第二排应占据所有可用空间。以下内容在FF58中似乎有效，但在Chrome 63中失败。代码中有错误吗

<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;
}

---

你的解决方案就快到了。尝试更改为网格模板行：60px 1fr

---

非常感谢。所以…自动设置足够大的尺寸以容纳项目，但我猜不会占用所有空间。根据您的猜测，这是绝对正确的：根据规范，自动对齐内容的行为与id默认的拉伸相同，除非在同一维度中有任何fr大小的轨迹。如果在本例中用高度替换最小高度，则会出现这种情况。看起来很像Chrome中的一个bug。