Flexbox: scrollbarer Inhalt mit sticky footer

Question

Ich möchte eine Box (flex-item in diesem Fall) machen, die immer in der Mitte des Containers bleibt. In diesem Feld gibt es einen Kopf-, Fußzeilen- und Inhaltsbereich. Wenn die Größe des Inhalts zu groß wird, möchte ich, dass der Inhaltsbereich scrollbar ist. Die Kopf- und Fußzeile sollte immer sichtbar sein und die Box sollte immer in ihrem Container bleiben. Hier

ist, was ich in der Lage gewesen zu schreiben:

HTML

<div class="flex-container"> 
    <div class="flex-item"> 
    <header>Header</header> 
    <div class="content"> 
     A 
     <br>B 
     <br>C 
     <br>D 
     <br>E 
     <br>F 
     <br>G 
     <br>H 
     <br>I 
     <br>J 
     <br>K 
    </div> 
    <footer>Footer</footer> 
    </div> 
</div> 

CSS

body { 
    margin: 120px; 
} 

.flex-container { 
    display: flex; 
    width: 200px; 
    height: 200px; /* We can assume that the container's height is hardcoded in this example, but the end solution should work even if this value is changed*/ 
    border: 1px solid black; 
    justify-content: center; 
} 

.flex-item { 
    box-sizing: border-box; 
    width: 150px; 
    border: 5px solid blue; 
    align-self: center; 
    background-color: red; 
    display: flex; 
    flex-flow: column; 
    max-height: 100%; 
} 

.content { 
    /* It should be possible to scroll this element when it get too big in height*/ 
    background-color: grey; 
    flex: 1; 
} 

Der Code auf JSFiddle gehostet wird: https://jsfiddle.net/9fduhpev/3/

Um zu erklären, die gleiche Ding visuell, hier ist die aktuelle Situation:Hier 210

ist das, was ich will:

Answer 1

Verwendung overflow-y: auto;.

Lesen Sie dazu: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

body { 
 
    margin: 120px; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    justify-content: center; 
 
} 
 

 
.flex-item { 
 
    box-sizing: border-box; 
 
    width: 150px; 
 
    border: 5px solid blue; 
 
    align-self: center; 
 
    background-color: red; 
 
    display: flex; 
 
    flex-flow: column; 
 
    max-height: 100%; 
 
} 
 

 
.content { 
 
    background-color: grey; 
 
    flex: 1; 
 
    overflow-y: auto; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
    <header>Header</header> 
 
    <div class="content"> 
 
     A 
 
     <br>B 
 
     <br>C 
 
     <br>D 
 
     <br>E 
 
     <br>F 
 
     <br>G 
 
     <br>H 
 
     <br>I 
 
     <br>J 
 
     <br>K 
 
     <br>L 
 
    </div> 
 
    <footer>Footer</footer> 
 
    </div> 
 
</div>

Answer 2

Ich schlage vor, Sie geben overflow: auto. Damit ist es bei Bedarf scrollbar.

body { 
 
    margin: 20px; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    justify-content: center; 
 
} 
 
.flex-item { 
 
    box-sizing: border-box; 
 
    width: 150px; 
 
    border: 5px solid blue; 
 
    align-self: center; 
 
    background-color: red; 
 
    display: flex; 
 
    flex-flow: column; 
 
    max-height: 100%; 
 
} 
 
.content { 
 
    background-color: grey; 
 
    flex: 1; 
 
    overflow: auto; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
    <header>Header</header> 
 
    <div class="content"> 
 
     A 
 
     <br>B 
 
     <br>C 
 
     <br>D 
 
     <br>E 
 
     <br>F 
 
     <br>G 
 
     <br>H 
 
     <br>I 
 
     <br>J 
 
     <br>K 
 
     <br>L 
 
    </div> 
 
    <footer>Footer</footer> 
 
    </div> 
 
</div>

Answer 3

würde ich so etwas tun:

.content { 
    height: 100%; 
    overflow:auto; 
    background-color: grey; 
    flex: 1; 
} 

https://jsfiddle.net/9fduhpev/4/