リミットのdivの高さ：オーバーフローで親をスクロール：

Question

を隠された私は、次のCSSの問題がありますので、私は窓の高さに合わせて、外側のdivをしたい

.outer{ 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.inner{ 
 
    overflow-y: scroll; 
 
}

<div id="outer"> 
 
    <div>some dynamic content with unknown height</div> 
 
    <div id="inner"> 
 
    some dynamic content with unknown height 
 
    </div> 
 
    </div>

を、私の内側divはscrollableでなければなりません。問題は、私はそれが動的なコンテンツで満たされているので、内部のdivに固定された高さの値を与えることはできません。オーバーフロー - スクロールは、私が提供することはできないように、高さの値を必要とします。内部divの高さに対する私の（理論上の）制限は外側divです。親の高さに相対的な高さを使うことはできません。前に来たdivの高さがわからないからです。

Answer 1

あなたはその

注意を解決するためにflexboxを使用することができ、私は内側のdiv要素が高さを必要とする、あなたのCSSルールに一致するようにclassに

html, body { 
 
    margin: 0; 
 
} 
 
.outer { 
 
    height: 100vh; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: lightgray; 
 
} 
 
.inner { 
 
    flex: 1; 
 
    overflow-y: scroll; 
 
    background: lightgreen; 
 
}

<div class="outer"> 
 
    <div> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    </div> 
 
    <div class="inner"> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    some dynamic content with unknown height<br> 
 
    </div> 
 
</div>