简单 CSS 网格在 FF 中有效但在 Chrome 中无效

Question

我正在尝试制作 1 列 2 行的网格。第二行应该包含所有可用的 space。以下似乎在 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;
}

https://jsfiddle.net/wog9uhud/

Answer 1

您的解决方案就快出现了。尝试更改为 grid-template-rows: 60px 1fr.

https://jsfiddle.net/wog9uhud/1/

简单 CSS 网格在 FF 中有效但在 Chrome 中无效

Simple CSS Grid works in FF but not Chrome

css

css-grid