网格模板行在 Chrome 83 中不再按预期运行答案

【问题标题】：Grid template rows no longer functioning as expected with Chrome 83网格模板行在 Chrome 83 中不再按预期运行
【发布时间】：2020-11-11 01:12:21
【问题描述】：

在以前的 Chrome 版本中，您可以定义 grid-template-rows 以使某些行的高度固定，而其他行会像 flex 模型一样扩展。这似乎不再是这种情况，我提供了一个小提琴作为示例。

header 和 footer div 的高度设置为 100 像素，模板行值设置为 auto。 main div 没有定义高度，它的模板行值设置为1fr。预期的行为是 main div 应该填充 800px 的剩余高度，但其客户端高度为零。

我的问题，关于小提琴，为什么main div 没有扩展以填充grid div 的剩余高度？

.container {
  display: flex;
  min-height: 1000px;
  flex-direction: column;
}

.grid {
  display: grid;
  flex: 1;
  grid-template-areas: 
     "header" 
      "main"
     "footer";
  grid-template-rows: auto 1fr auto;
  justify-items: stretch;
  align-items: stretch;
}

.header {
  grid-area: header;
  background-color: red;
  height: 100px;
}

.main {
  grid-area: main;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="grid">
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>
</div>

https://jsfiddle.net/kqxLd6tm/2/

【问题讨论】：

与网格无关，但与 flexbox 无关，flex:1 没有完成它的工作 .. 添加 height: 0;到网格解决问题（不知道为什么）

标签： html css google-chrome flexbox css-grid

【解决方案1】：

这看起来像是 flex-direction: column (details) 和/或嵌套弹性容器 (details) 的另一个错误。

在您的代码中，flex: 1 显然被忽略了。或者它可能是在计算了其他框大小之后才被考虑到布局中的，所以它没有效果。

无论如何，您都可以通过使用row 而不是column 方向容器来解决问题。

由于带有flex-direction: row 的容器会自动将align-self: stretch 设置为子级，因此您不再需要flex: 1 的高度。但是宽度仍然需要它。

简而言之，您只需对代码进行一项更改：删除flex-direction: column。

.container {
  display: flex;
  min-height: 1000px;
  /* flex-direction: column; */
}

.grid {
  display: grid;
  flex: 1;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
  background-color: red;
  height: 100px;
}

.main {
  grid-area: main;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
  height: 100px;
}

<div class="container">
    <div class="grid">
      <div class="header"></div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
</div>

【讨论】：