Html 如何使用滚动条使列表适合父div

我无法将列表放入父div（定义为100vh）中。 列表溢出分区。尝试使用flex和grid，但未成功。我不想使用固定大小的像素，因为页面必须随浏览器窗口调整大小

下面的代码笔显示问题所在。谢谢你的帮助

html，正文{
保证金：0；
填充：0；
}
div{
边框：1px实心#5050ff；
}
身体{
字体大小：xxx大号；
}
#主要{
高度：100vh；
}
#名单{
}

标题

名字1
名称2
名字3
名字4
名字5
姓名6
姓名7
姓名8
名字9
名字10
名字11
名字12
姓名13
姓名14
名字15
姓名16
姓名17
姓名18
姓名19
姓名20
姓名21

我在ul中添加了一些规则，如：

ul {
  overflow-y: scroll;
  height: calc(100vh - 4rem);
}

---

我用flexbox为您创建了一个演示。希望能有帮助

*{
框大小：边框框；
}
html，正文{
保证金：0；
填充：0；
}
div{
边框：1px实心#5050ff；
}
身体{
字体大小：xxx大号；
}
#主要{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
#名单{
溢出：自动；
}

标题

名字1
名称2
名字3
名字4
名字5
姓名6
姓名7
姓名8
名字9
名字10
名字11
名字12
姓名13
姓名14
名字15
姓名16
姓名17
姓名18
姓名19
姓名20
姓名21

只需像这样在主css中添加

溢出：滚动

#main{
  height: 100vh; 
  overflow: scroll;
}

#main{
  height: calc(100vh - 2px);/* The border is 2 pixels and needs to be subtracted */
  overflow: auto;
}

#main{
  height: 100vh; 
  overflow: scroll;
}