Stretch flexbox item vertically - html

Question

I'm trying to make the list take up all the blue space, but I don't want to add another item.
I could just give the items the right amount of padding to make it fit perfectly, but I feel like that's not the right way. So I thought there must be a way to do this with flexbox.
See plunker and snippet:
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

Make your ul a flexbox too:
height: 100%;
margin: 0; // reset the margin
display: flex;
flex-direction: column; // list vertically
justify-content: space-around; // spread the li vertically
and add flex: 1 to the lis
See demo below:
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>