Html 使用Chrome 83时，网格模板行不再按预期工作

在以前的Chrome版本中，您可以定义

网格模板行

，这样某些行的高度是固定的，而其他行则会像flex模型一样展开。这似乎不再是事实，我提供了一把小提琴作为例子

页眉

和

页脚

div的高度设置为100px，模板行值设置为

自动

。

main

div没有定义高度，其模板行值设置为

1fr

。预期的行为是，

main

div应填充剩余的800px高度，但其客户端高度为零

我的问题是，关于小提琴，为什么

main

div没有扩展以填充

网格的剩余高度


.container{
显示器：flex；
最小高度：1000px；
弯曲方向：立柱；
}
.电网{
显示：网格；
弹性：1；
网格模板区域：
“标题”
“主要”
“页脚”；
网格模板行：自动1fr自动；
调整项目：拉伸；
对齐项目：拉伸；
}
.标题{
网格区域：标题；
背景色：红色；
高度：100px；
}
梅因先生{
网格区域：主；
背景颜色：绿色；
}
.页脚{
网格区域：页脚；
背景颜色：蓝色；
高度：100px；
}
这看起来像是另一个flex-direction:column

（）和/或嵌套flex容器（）的bug

在您的代码中，

flex:1

显然被忽略。或者，在计算了其他框的大小之后，它被分解到布局中，所以它没有任何效果

在任何情况下，都可以使用

行

而不是

列

方向容器来解决问题

由于具有

flex-direction:row

的容器会自动将

align self:stretch

设置为子容器，因此不再需要

flex:1

作为高度。但你仍然需要它的宽度

简而言之，您只需要对代码进行一次更改：remove

flex direction:column

.container{
显示器：flex；
最小高度：1000px；
/*弯曲方向：立柱*/
}
.电网{
显示：网格；
弹性：1；
网格模板区域：
“标题”
“主要”
“页脚”；
网格模板行：自动1fr自动；
}
.标题{
网格区域：标题；
背景色：红色；
高度：100px；
}
梅因先生{
网格区域：主；
背景颜色：绿色；
}
.页脚{
网格区域：页脚；
背景颜色：蓝色；
高度：100px；
}

---

与网格无关，但与flexbox无关，flex:1不起作用。。添加高度：0；到网格解决了这个问题（不知道为什么）