Flexbox Überlauf, wenn der Container minimale Größe erreicht

Question

Ich habe einen Flex-Säulen-Container mit 2 Div innen. Das erste div hat flex: 1, damit es mit dem verbleibenden Speicherplatz wächst. Das zweite div hat eine feste Höhe. Beachten Sie, dass sich der Container innerhalb eines festen Bereichs befindet, der das gesamte Ansichtsfenster enthält.

Das Problem ist, dass, wenn der Container zu klein ist, um den Inhalt anzupassen, der Inhalt des ersten Div unter dem zweiten überläuft.

.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>

Hier ist ein codepen example.

Eine Lösung könnte eine Mindesthöhe des Containers sein, aber es ist keine dynamische und reaktionsfähige Lösung.

Kann mir jemand sagen, wie man ein Überlaufverhalten auf dem Container erreicht, wenn der gesamte Inhalt nicht passt?

Answer 1

können Sie overflow:auto zu .test hinzufügen und flex Wert auf .child1 aktualisieren: 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>