コンテナが最小サイズに達したときにFlexboxがオーバーフローする

Question

2つのdivの内側にフレックスカラムコンテナがあります。最初のdivには残りのスペースが大きくなるようにflex: 1があります。 2番目のdivは固定された高さです。コンテナはビューポート全体を取る固定されたdiv内にあることに注意してください。

問題は、コンテナがコンテンツに収まるには小さすぎると、最初のdivのコンテンツが2番目のコンテンツの下にオーバーフローすることです。ここで

.test { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    //min-height: 500px; 
 
} 
 
.child1 { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    flex: 1; 
 
} 
 
.child2 { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
span { 
 
    padding: 20px; 
 
} 
 
span:first-child { 
 
    margin-top: auto; 
 
} 
 
span:last-child { 
 
    margin-bottom: auto; 
 
}

<div class="test"> 
 
    <div class="child1"> 
 
    <span>Test1</span> 
 
    <span>Test2</span> 
 
    <span>Test3</span> 
 
    <span>Test4</span> 
 
    <span>Test5</span> 
 
    <span>Test6</span> 
 
    <span>Test7</span> 
 
    <span>Test8</span> 
 
    </div> 
 
    <div class="child2"> 
 
    <span>Test1</span> 
 
    <span>Test2</span> 
 
    <span>Test3</span> 
 
    <span>Test4</span> 
 
    </div> 
 
</div>

はcodepen exampleです。

1つの解決策は、コンテナの最小高さを設定することですが、動的で応答性の高い解決策ではありません。

コンテンツ全体が収まらないときに、コンテナのオーバーフロー動作を実現する方法を教えてもらえますか？

Answer 1

あなたは.testにoverflow:autoを追加し、.child1にflex値を更新することがあります。DEMO to play with

.test { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow:auto;/* update */ 
 
} 
 

 
.child1 { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content:center;/* update (IE)*/ 
 
    flex: 1 0 auto;/* update *//* flex-shrink:0 allow element to expand and push next container else overflow defaut is visible IF SET TO 1 */ 
 
} 
 

 
.child2 { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
span { 
 
    padding: 20px; 
 
} 
 

 
span:first-child { 
 
    margin-top: auto; 
 
} 
 

 
span:last-child { 
 
    margin-bottom: auto; 
 
}

<div class="test"> 
 
    <div class="child1"> 
 
    <span>Test1</span> 
 
    <span>Test2</span> 
 
    <span>Test3</span> 
 
    <span>Test4</span> 
 
    <span>Test5</span> 
 
    <span>Test6</span> 
 
    <span>Test7</span> 
 
    <span>Test8</span> 
 
    </div> 
 
    <div class="child2"> 
 
    <span>Test1</span> 
 
    <span>Test2</span> 
 
    <span>Test3</span> 
 
    <span>Test4</span> 
 
    </div> 
 
</div>