Html 垂直拉伸flexbox项目

我试图让列表占据所有空白，但我不想再添加其他项目。 我可以给这些物品适当的填充量，使其完美贴合，但我觉得这不是正确的方式。所以我想一定有办法用flexbox做到这一点

请参阅和代码片段：

html，
身体{
边际：0px；
身高：100%；
}
主要{
显示器：flex；
}
#第1条{
弹性：2；
右边距：20px；
背景：红色；
显示器：flex；
}
#第2条{
背景：蓝色；
弹性：1；
}
#第1条>img，
#art1>p{
弹性：1；
}
第{}条
@介质（最大宽度：800px）{
主要{
弯曲方向：立柱；
}
#第1条{
保证金：0；
}
}
.Activiteten{
背景：黄色；
列表样式类型：无；
保证金：0；
填充：0；
}
.activiteiten>li{
背景：白色；
边框：1px纯绿色；
填充：10px；
}

益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑

让您的

ul

也成为flexbox：

并将

flex:1

添加到

li

s

请参见下面的演示：

html，
身体{
边际：0px；
身高：100%；
}
主要{
显示器：flex；
}
#第1条{
弹性：2；
右边距：20px；
背景：红色；
显示器：flex；
}
#第2条{
背景：蓝色；
弹性：1；
}
#第1条>img，
#art1>p{
弹性：1；
}
第{}条
第ul条{
身高：100%；
保证金：0；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
第二条{
弹性：1；
}
@介质（最大宽度：800px）{
主要{
弯曲方向：立柱；
}
#第1条{
保证金：0；
}
}
.Activiteten{
背景：黄色；
列表样式类型：无；
保证金：0；
填充：0；
}
.activiteiten>li{
背景：白色；
边框：1px纯绿色；
填充：10px；
}

益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑

它满足了我的要求，但现在我遇到了另一个问题。因为

li

不靠在一起，所以您可以看到

ul

背景，希望它有意义。是的，很好，非常感谢！顺便说一句，

justify content:space-around

现在不需要了吗？

height: 100%;
margin: 0; // reset the margin
display: flex;
flex-direction: column; // list vertically
justify-content: space-around; // spread the li vertically