CSS - прокрутка содержимого не расширяется должным образом

Question

Проблема заключается в том, как этот (https://jsfiddle.net/Lpm2ghsr/4/)

При прокрутке, вы можете видеть цвет фона, что высота .content каким-то образом та же, что в контейнере , вместо того, чтобы расширяться до высоты фактического содержимого.

Добавление «высоты: 100%» к контенту не работает, поскольку 100% означает ту же высоту, что и его родитель, я полагаю?

Я попытался добавить «переполнение: авто» в .content, но это не совсем то, что я хочу, так как полоса прокрутки должна быть наружной, как показано в примере.

Вот 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:

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

Я надеюсь, что это самый простой способ. Попробуй это.

Ваше основное содержание находится в классе «content», поэтому примените высоту к классу содержимого. Попробуйте приведенный ниже код.

.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 { 
    display: block; 
}