Html 带有溢出的Flex容器

我试图在

flex

容器中显示一个圆圈，但是内容被压扁了

如果列表中的项目较少，则会正确显示。我怎样才能解决这个问题

.container{
最大高度：100px；
溢出：自动；
显示器：flex；
弯曲方向：立柱；
边框：5px纯黑；
}
.圆圈{
显示：块；
左边距：自动；
右边距：自动；
边框：5px实心#555；
边界半径：50%；
宽度：25px；
高度：25px；
}

项目1
项目2
项目3
项目4
项目5

添加

弹性收缩：0

到。

圆圈

.container{
最大高度：100px；
溢出：自动；
显示器：flex；
弯曲方向：立柱；
边框：5px纯黑；
}
.圆圈{
显示：块；
左边距：自动；
右边距：自动；
边框：5px实心#555；
边界半径：50%；
宽度：25px；
高度：25px；
弹性收缩：0
}

项目1
项目2
项目3
项目4
项目5

如果删除“最大高度”会怎么样？