Элемент вертикально центра с динамической высотой в контейнере прокрутки

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>