Css 滚动容器中具有动态高度的垂直居中元素

我有一个滚动容器，通常是整个屏幕的大小。在它里面我放置动态内容。所以我不知道它有多高，或者会插入多少个元素

现在我想这样布置它：

• 如果有足够的空间，我希望整个内容在滚动容器内垂直居中
• 如果内容的总高度超过滚动容器的高度，我希望容器只滚动内容，就像没有居中一样

我创建了一个例子，试图用flexbox解决这个问题。内容高度小于容器高度时，其工作方式与预期相同。但当内容超过容器高度时，由于

调整内容

，内容的某些元素被切断：

您可以在图像上看到，滚动容器的scrollTop一直位于顶部，但元素1和2不可见

我想知道是否有一个CSS唯一的解决方案。JS解决方案我可以自己做，但那不是我想要的。如果不可能，也没关系

.container{
显示：内联块；
宽度：300px；
高度：300px；
边框：2倍纯红；
溢出y：自动；
保证金：1rem 0；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.街区{
宽度：80%；
高度：3雷姆；
保证金：1rem自动；
背景：蓝色；
弹性收缩：0；
颜色：#fff；
文本对齐：居中；
}

1.
1.
2.
3.
1.
2.
3.
4.
5.
6.
7.
8.

尝试将溢出应用于内部包含的div，如下所示：

.container{
显示：内联块；
宽度：300px；
高度：300px；
边框：2倍纯红；
保证金：1rem 0；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.内部{
溢出y：自动；
}
.街区{
宽度：80%；
高度：3雷姆；
保证金：1rem自动；
背景：蓝色；
弹性收缩：0；
颜色：#fff；
文本对齐：居中；
}

1.
1.
2.
3.
1.
2.
3.
4.
5.
6.
7.
8.

尝试将溢出应用于内部包含的div，如下所示：

.container{
显示：内联块；
宽度：300px；
高度：300px；
边框：2倍纯红；
保证金：1rem 0；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.内部{
溢出y：自动；
}
.街区{
宽度：80%；
高度：3雷姆；
保证金：1rem自动；
背景：蓝色；
弹性收缩：0；
颜色：#fff；
文本对齐：居中；
}

1.
1.
2.
3.
1.
2.
3.
4.
5.
6.
7.
8.

啊，是的，这是有道理的。谢谢啊，是的，这是有道理的。谢谢