Stretch-Container nach unten, aber es zu erweitern, wenn mehr Inhalt

Question

Ich bin auf der Suche nach einer besseren Lösung für das Problem, nicht genug Inhalt, um den Bildschirm zu füllen.

Normalerweise, wenn Sie den Bildschirm füllen möchten, machen Sie entweder den HTML-, Körperhöhen 100% und dann Ihren Behälter 100% oder einfach 100vh wie in meinem JSFiddle unten verwenden.

Das Problem ist, wenn der Inhalt schließlich über 100% Höhe des Bildschirms dehnt es abgeschnitten wird.

ich mich gefragt, ob es eine Möglichkeit (vielleicht mit Flexbox) war, wo man 100% der Höhe, sondern auch, wenn der Inhalt geht über 100% der Behälter expandiert in Größe haben könnte.

html, body 
 
{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.content 
 
{ 
 
    background: grey; 
 
    /* height: 100vh; - this works but if content goes past 100vh it gets cut off */ 
 
}

<div class="content"> 
 
    <span> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </span> 
 
</div>

Answer 1

einen Behälter verwenden um die content, auf die Siegeltenund display: flex und jetzt kann die content eine Spalteflexbox gemacht werden - siehe Demo unten und updated fiddle:

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    min-height: 100vh; 
 
    display: flex; 
 
} 
 

 
.content { 
 
    background: grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie fehlen nur die overflow: auto; in Ihrem .content div

Your Fiddle updated

body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

.content { 
    background: grey; 
    height: 100%; 
    overflow: auto; 
}