フレックスボックス：スクロールフッター付きのスクロール可能なコンテンツ

Question

いつもコンテナの真ん中にあるボックス（この場合はフレックスアイテム）を作りたいと思います。そのボックスには、ヘッダー、フッター、およびコンテンツセクションがあります。コンテンツのサイズが高すぎる場合は、コンテンツセクションをスクロール可能にします。ヘッダーとフッターは常に表示され、ボックスは常にそのコンテナにとどまるべきです。ここで

は私が書くことができたものです：

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; 
} 

は、コードがJSFiddleでホストされている：https://jsfiddle.net/9fduhpev/3/

同じことを説明するために視覚的に、現状はここにあります：

ここでは、私が欲しいものです：

Answer 1

使用overflow-y: auto;。

これを読む：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

私はあなたがそれoverflow: autoを与える示唆しています。それによって、必要に応じてスクロール可能になります。

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

私はこのようなものだろう：

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

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