Get children of flex CSS layout to stretch - html

Question

I am trying to get a table list done with many elements inside that I don't want to have with the same height. I want to be able to adjust the number of columns side by side later on. The "Cells" on the same row should all stretch to the same height. In my implementation this is done via a flexbox layout, visualized with the borders. However, the children of the container do not stretch all the way up, which can be seen by the background color not going all the way down. Here is a codepro link to demonstrate the problem:
HTML
<div id="list">
<div class="show">
<div class="show-wrapper">
<div class="show-time-container">
<div class="show-time">00:21</div>
</div>
<div class="show-tvstation-container">
<div class="show-tvstation-type-wrapper">
<span class="show-tvstation-type">cable</span>
<span class="show-tvstation-id">Pro Sieben</span>
</div>
</div>
<div class="show-container">
<div class="show-description-wrapper">
<span class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
<span class="description">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
<span class="description">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
<span class="description">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
</div>
</div>
</div>
</div>
SCSS
#list {
background: grey;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
align-content: flex-start;
position: relative;
width: 100%;
}
.show {
background: white;
}
.show-time-container {
background: darken(#eee, 30%);
}
.show {
width: 50%;
}
.show {
border: 1px solid #333;
margin: -1px;
}
.show-wrapper {
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
align-items: stretch;
align-content: flex-start;
.show-time-container {
padding: 5px;
width: 15%;
.show-time {
font-size: 20px;
font-weight: 700;
}
}
.show-tvstation-container {
padding: 5px;
width: 15%;
}
.show-container {
padding: 5px;
width:60%;
}
}
.show-days-wrapper {
display: flex;
flex-direction: column;
}
.description {
font-size: 14px;
display: inline-block;
&:after {
content: '\2009\2013\2009';
}
&:first-child {
font-weight: 700;
font-size: 1.3em;
&:after {
content: '';
}
}
}
.show-tvstation-type:after {
content: '\2009';
}
.show-tvstation-type-wrapper {
font-weight: 700;
font-size: 16px;
}
.show-properties-wrapper {
display: flex;
flex-direction: column;
}
How can I get the children to strecth to fill everything and the background goes down all the way?