スクロールコンテナの動的な高さを持つ垂直方向の中央の要素

Question

私は通常、画面全体のサイズであるスクロールコンテナを持っています。その中に私は動的コンテンツを配置します。だから私はそれがどの高さか、どのくらいの要素が挿入されるのか分かりません。

は今、私はこのようにそれをレイアウトしたい：

• 十分なスペースがある場合は、コンテンツの全体の高さは、高さを超えた場合、私は垂直方向にスクロールコンテナ
• の内側中心に全体のコンテンツをしたいですスクロールコンテナ、私はコンテナがちょうどセンタリングがないように内容をスクロールするようにしたい。

フレックスボックスでこの問題を解決しようとした例を作成しました。コンテンツの高さがコンテナの高さよりも低い場合、意図したように機能します。コンテンツは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>