Flexbox-Element vertikal strecken

Question

Ich versuche, dass die Liste den ganzen blauen Platz einnimmt, aber ich möchte kein weiteres Element hinzufügen. Ich könnte den Gegenständen die richtige Menge an Polsterung geben, damit sie perfekt passt, aber ich denke, das ist nicht der richtige Weg. Also dachte ich, dass es eine Möglichkeit geben muss, dies mit Flexbox zu tun.

Siehe plunker und Code-Schnipsel:

html, 
 
body { 
 
    margin: 0px; 
 
    height: 100%; 
 
} 
 

 
main { 
 
    display: flex; 
 
} 
 

 
#art1 { 
 
    flex: 2; 
 
    margin-right: 20px; 
 
    background: red; 
 
    display: flex; 
 
} 
 

 
#art2 { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 

 
#art1>img, 
 
#art1>p { 
 
    flex: 1; 
 
} 
 

 
article {} 
 

 
@media (max-width: 800px) { 
 
    main { 
 
    flex-direction: column; 
 
    } 
 
    #art1 { 
 
    margin: 0; 
 
    } 
 
} 
 

 
.activiteiten { 
 
    background: yellow; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.activiteiten>li { 
 
    background: white; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
}

<main> 
 
    <article id="art1"> 
 
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> 
 
    <img src="http://via.placeholder.com/150x250" alt=""> 
 
    </article> 
 
    <article id="art2"> 
 
    <ul class="activiteiten"> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
    </ul> 
 
    </article> 
 
</main>

Answer 1

Machen Sie Ihre ul ein Flexbox zu:

height: 100%; 
margin: 0; // reset the margin 
display: flex; 
flex-direction: column; // list vertically 
justify-content: space-around; // spread the li vertically 

und fügen flex: 1 zum li s

Siehe Demo unter:

html, 
 
body { 
 
    margin: 0px; 
 
    height: 100%; 
 
} 
 

 
main { 
 
    display: flex; 
 
} 
 

 
#art1 { 
 
    flex: 2; 
 
    margin-right: 20px; 
 
    background: red; 
 
    display: flex; 
 
} 
 

 
#art2 { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 

 
#art1>img, 
 
#art1>p{ 
 
    flex: 1; 
 
} 
 

 
article {} 
 

 
article ul { 
 
    height: 100%; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
article ul li { 
 
    flex: 1; 
 
} 
 

 
@media (max-width: 800px) { 
 
    main { 
 
     flex-direction: column; 
 
    } 
 
    #art1 { 
 
     margin: 0; 
 
    } 
 
} 
 

 
.activiteiten { 
 
    background: yellow; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.activiteiten>li{ 
 
    background: white; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
}

<main> 
 
    <article id="art1"> 
 
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> 
 
    <img src="http://via.placeholder.com/150x250" alt=""> 
 
    </article> 
 
    <article id="art2"> 
 
    <ul class="activiteiten"> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
    </ul> 
 
    </article> 
 
</main>