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

Question

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

现在我想这样布局:

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

我创建了一个示例，尝试使用 Flexbox 解决此问题。当内容高度小于容器高度时，它会按预期工作。但是当内容超过容器高度时，由于 justify-content 的原因，内容的某些元素被截断:

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

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

.container {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 2px solid red;
  overflow-y: auto;
  margin: 1rem 0;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.block {
  width: 80%;
  height: 3rem;
  margin: 1rem auto;
  background: blue;
  flex-shrink: 0;
  color: #fff;
  text-align: center;
}

<div class="container">
  <div class="block">1</div>
</div>

<div class="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

<div class="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
</div>

Answer 1

尝试将溢出应用到内部包含的 div 中，如下所示:

.container {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 2px solid red;
  margin: 1rem 0;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.inner {
  overflow-y: auto;  
}

.block {
  width: 80%;
  height: 3rem;
  margin: 1rem auto;
  background: blue;
  flex-shrink: 0;
  color: #fff;
  text-align: center;
}

<div class="container">
  <div class="inner">
    <div class="block">1</div>
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
  </div>
</div>