在滚动容器中具有动态高度的垂直中心元素

Question

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

现在我想像这样布局：

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

我创建了一个示例，我试图用flexbox解决这个问题。内容高度小于容器高度，它的工作方式与预期的一样。但是当内容超出容器高度时，由于justify-content，内容的某些元素被截断：

你可以在图像上看到滚动容器的scrollTop一直在顶部，但是元素1和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的内部，如下所示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;