棘手的CSS垂直居中填充

如何解决棘手的CSS垂直居中填充

我有两列动态内容，并希望将它们对齐如下：

a）如果右列很小，我希望它垂直居中

b）如果右列很大，我希望它在顶部对齐

c）右列应始终（至少）具有80px的顶部填充。

有关所需行为，请参见下面的第一张和第二张图片。

在没有c）的情况下，这是微不足道的，例如，一种方法是使用flex，而第二列具有align-self：flex-start。

使用c）仍然显得微不足道-只需在右侧列的顶部和底部填充80px以确保其居中，但如果不合适则向下扩展。

但是，当内容很大时，我不希望底部额外的80px，如下面的第三幅图所示，这会使事情复杂得多。我尝试了一种解决方案，例如在右栏中使用flex-direction：column来设置自己的flex容器，在其中使用两个80px高度的div，其中一个设置为flex-shrink：1，主要内容设置为flex-shrink：0希望一个80px会在不必要的情况下崩溃-但这根本行不通（右列的高度不受限制，因此永远不会缩小）。

有什么选择吗？这里的用例是，右列是动态文本，但明显的选择是顶部和底部为80px，如果文本较长，则与下一个内容部分的间隙太大，或者如果文本较长，则间隙太短文字简短。