CSS - スクロールコンテンツの拡大ではないが、適切

Question

問題は、この（https://jsfiddle.net/Lpm2ghsr/4/）

のようであるあなたがスクロールすると、あなたは.contentの高さは何とかコンテナのと同じである、背景色で見ることができます実際のコンテンツの高さに拡大するのではなく、

コンテンツに「高さ：100％」を追加すると、親と同じ高さを意味する100％として機能していないようです。

"overflow：auto"を.contentに追加しようとしましたが、例のようにスクロールバーが外にある必要があるため、実際には必要ではありません。私はこれが最も簡単な方法であると思います

body{ 
    overflow: hidden; 
    width: 99%; 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
} 
header{ 
    height: 100px; 
    width: 100%; 
    background-color: black; 
} 

.container{ 
    display: flex; 
    overflow: auto; 
    width: 100%; 
    height: calc(100% - 100px); 
    position: relative; 
} 
.content{ 
    width: 100%; 
    background-color: #bbb; 
} 

pre{ 
    width: 100%; 
    font-size: 2rem; 
} 

Answer 1

：ここ

は、HTMLマークアップ

<header></header> 
<div class="container"> 
    <section class="content"> 
    <pre>some text 
    some text 
    some text 
    some text 
    some text 
    some text</pre> 
    </section> 
</div> 

とCSSです。これを試して。

メインコンテンツは「コンテンツ」クラスですので、コンテンツクラスに高さを適用してください。 下記の修正コードをお試しください。

.container{ 
    display: flex; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.content{ 
    width: 100%; 
    height: calc(100% - 100px); 
    background-color: #bbb; 
    overflow: auto; 
} 

Answer 2

フレックスからブロックするように.containerディスプレイを変更すると動作します。

.container { 
    display: block; 
}