Javascript 带滚动的Div网格在flexbox中不工作

我已经用divs和flexbox创建了下面的网格，但是我遇到了一些问题。 标题（我希望它是固定的）与第一行重叠，我似乎无法获得正确的滚动…我如何才能解决这个问题？我曾想过只将overflow-y滚动条放在gridbody上，但这会创建一个额外的水平滚动条

var数据=[{
“标题”：“鸡肉玉米饼汤！”，
“youTubeId”：“B7JUzPTib9A”，
“评级”：0.970895223880597，
“观点”：73693，
“缩略图”：https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
“长度”：265
},
{
“标题”：“鸡汤馅饼汤|美味”，
“youTubeId”：“qAY4oWKY9kg”，
“评级”：0.97826086952174，
“意见”：6704，
“缩略图”：https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
“长度”：65
},
{
“标题”：“自制鸡汤面”，
“youTubeId”：“8J4HYnlBU7M”，
“评级”：0.9654550141789121，
“观点”：190886，
“缩略图”：https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
“长度”：215
},
{
“标题”：“3道简易自制鸡汤食谱”，
“youTubeId”：“QN6DBEVL0rU”，
“评级”：0.9938524590163934，
“意见”：22353，
“缩略图”：https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
“长度”：461
},
{
“名称”：“慢煮鸡汤面”，
“youTubeId”：“VgFHbHZDc4I”，
“评级”：0.9736842105263158，
“意见”：4534，
“缩略图”：https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
“长度”：97
},
{
“标题”：“慢炖鸡肉玉米饼汤|美味”，
“youTubeId”：“Zf858LPRNRc”，
“评级”：1，
“意见”：13645，
“缩略图”：https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
“长度”：56
},
{
“标题”：“罐罐鸡汤面配方”，
“youTubeId”：“KPSFAZTVRC”，
“评级”：0.9675810473815462，
“视图”：40056，
“缩略图”：https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
“长度”：363
},
{
“标题”：“鸡肉玉米饼汤-林恩的食谱”，
“youTubeId”：“kS6yykyOwUE”，
“评级”：0.977777，
“意见”：2675，
“缩略图”：https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
“长度”：180
},
{
“标题”：“鸡肉玉米饼汤-林恩的食谱”，
“youTubeId”：“kJI3bHL3ZW0”，
“评级”：0.9620253164556962，
“观点”：6814，
“缩略图”：https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
“长度”：416
}
];
loadData（）；
函数loadData（）{
$（“.gridBody”）.empty（）；
$。每个（数据、功能（索引、项目）{
设行=$（“”{
班级：“gridRow”
});
$。每个（项目、功能（键、值）{
设单元格=$（“”{
类：“网格单元”，
文本：值
});
$（行）。追加（单元格）；
});
$（“.gridBody”）.append（行）；
});
}

html，
身体{
身高：100%；
}
#主要{
身高：100%；
宽度：80%；
保证金：0自动；
}
.电网{
背景色：#fff；
显示器：flex；
弯曲方向：立柱；
溢出-x：自动；
身高：80%；
}
.gridHeader{
高度：100px；
}
.网格体{
溢出y：滚动；
}
.gridHeader，
格里德罗先生{
显示器：flex；
}
.gridHeader.gridCell{
字体大小：粗体；
}
格瑞赛尔先生{
边框：1px实心#000；
最小宽度：计算值（100%/6）；
填充：10px；
断字：断字；
文本对齐：居中；
}

标题
青年节
评级
意见
缩略图
长度

添加

框尺寸：边框框至
.gridCell
。另外，我想将
overflow-y:scroll
转到
overflow-y:overlay。
另外，您需要更改高度：100px至<代码>最小高度：100px


var数据=[
{
“标题”：“鸡肉玉米饼汤！”，
“youTubeId”：“B7JUzPTib9A”，
“评级”：0.970895223880597，
“观点”：73693，
“缩略图”：https://i.ytimg.com/vi/B7JUzPTib9A/mqdefault.jpg",
“长度”：265
},
{
“标题”：“鸡汤馅饼汤|美味”，
“youTubeId”：“qAY4oWKY9kg”，
“评级”：0.97826086952174，
“意见”：6704，
“缩略图”：https://i.ytimg.com/vi/qAY4oWKY9kg/mqdefault.jpg",
“长度”：65
},
{
“标题”：“自制鸡汤面”，
“youTubeId”：“8J4HYnlBU7M”，
“评级”：0.9654550141789121，
“观点”：190886，
“缩略图”：https://i.ytimg.com/vi/8J4HYnlBU7M/mqdefault.jpg",
“长度”：215
},
{
“标题”：“3道简易自制鸡汤食谱”，
“youTubeId”：“QN6DBEVL0rU”，
“评级”：0.9938524590163934，
“意见”：22353，
“缩略图”：https://i.ytimg.com/vi/QN6DBEVL0rU/mqdefault.jpg",
“长度”：461
},
{
“名称”：“慢煮鸡汤面”，
“youTubeId”：“VgFHbHZDc4I”，
“评级”：0.9736842105263158，
“意见”：4534，
“缩略图”：https://i.ytimg.com/vi/VgFHbHZDc4I/mqdefault.jpg",
“长度”：97
},
{
“标题”：“慢炖鸡肉玉米饼汤|美味”，
“youTubeId”：“Zf858LPRNRc”，
“评级”：1，
“意见”：13645，
“缩略图”：https://i.ytimg.com/vi/Zf858LPRNRc/mqdefault.jpg",
“长度”：56
},
{
“标题”：“罐罐鸡汤面配方”，
“youTubeId”：“KPSFAZTVRC”，
“评级”：0.9675810473815462，
“视图”：40056，
“缩略图”：https://i.ytimg.com/vi/kpSFAZTvHrc/mqdefault.jpg",
“长度”：363
},
{
“标题”：“鸡肉玉米饼汤-林恩的食谱”，
“youTubeId”：“kS6yykyOwUE”，
“评级”：0.977777，
“意见”：2675，
“缩略图”：https://i.ytimg.com/vi/kS6yykyOwUE/mqdefault.jpg",
“长度”：180
},
{
“标题”：“鸡肉玉米饼汤-林恩的食谱”，
“youTubeId”：“kJI3bHL3ZW0”，
“评级”：0.9620253164556962，
“观点”：6814，
“缩略图”：https://i.ytimg.com/vi/kJI3bHL3ZW0/mqdefault.jpg",
“长度”：416
}
];
loadData（）；
func
.gridHeader {
   height: 100px;
   flex-shrink: 0;
}

.gridHeader {
   flex: 0 0 100px;
}