Html CSS网格项在使用“时溢出网格容器”；对齐内容：在“之间的空格”；还有一个粘糊糊的头

我有一个基本的布局，我的CSS网格位于flex布局中，这样网格就占据了除了页脚之外的所有可用空间

收割台定位为

位置：粘性

网格中的项目不占据网格中可用的所有高度

在我的CSS网格布局中，我使用了
align content:space-between以便两个项目都位于网格的顶部和底部，中间有一些空白

这在Chrome和FF上看起来不错，但在Safari（Mac和iOS）上，第二个网格项放在网格之外（根据我的粘性标题的高度）


正文{
保证金：0；
填充：0；
字体系列：无衬线；
文本对齐：居中；
}
.flex{
最小高度：100vh；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
标题{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
z指数：999999；
填充：3em；
背景色：番茄；
}
页脚{
填充：1em；
背景色：番茄；
}
.电网{
宽度：100%；
-webkit-flex:1；
弹性：1；
显示：网格；
网格模板列：100%；
网格模板行：自动；
-webkit对齐内容：之间的空间；
对齐内容：之间的空间；
背景颜色：卡其色；
}
.项目{
框大小：边框框；
填充：0.6em；
}
.粉红{
背景颜色：粉红色；
}
.橙色{
背景颜色：橙色；
}

JS-Bin
标题
项目1
项目2
页脚
我不知何故通过将整个页面包装到另一个网格中“修复”了这个问题。但如果有人能提出更好/更干净的解决方案，我将不胜感激


正文{
保证金：0；
填充：0；
字体系列：无衬线；
文本对齐：居中；
}
.包装纸{
最小高度：100vh；
宽度：100%；
显示：网格；
弯曲方向：立柱；
网格模板列：100%；
网格模板行：100%；
}
.flex{
自我调整：伸展；
自我辩护：伸展；
背景色：石灰；
显示器：flex；
弯曲方向：立柱；
}
标题{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
z指数：999999；
填充：3em；
背景色：番茄；
}
页脚{
填充：1em；
背景色：番茄；
}
.电网{
宽度：100%；
-webkit-flex:1；
弹性：1；
显示：网格；
网格模板列：100%；
网格模板行：自动；
-webkit对齐内容：之间的空间；
对齐内容：之间的空间；
背景颜色：卡其色；
}
.项目{
框大小：边框框；
填充：0.6em；
}
.粉红{
背景颜色：粉红色；
}
.橙色{
背景颜色：橙色；
}

JS-Bin
标题
项目2
项目2
页脚
目前无法访问Safari，但您的问答提醒您：您可能还需要在网格容器上定义高度，以便在Safari中正常工作@迈克尔：谢谢！在Safari上，这似乎是完全相同的问题。改变<代码>最小高度：100vh至<代码>高度：100vh.flex
容器上的code>修复了该问题。