Force 100% height and vertically align content in FlexBox Columns - css

Question

I've looked at many other questions and answers, but can't figure out why I can't force 100% height on some flexbox columns - i.e., "Genre" with one line of text to match the height of "Song & The Artist" with two lines - while also vertically aligning and centering all text:
Codepen: https://codepen.io/bluedogranch/pen/ZEYXGmx
HTML:
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell">Song<br /><span class="artist">The Artist</span></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell">Song<br /><span class="artist">The Artist</span></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
</div>
CSS:
html, body {
min-height: 100%;
margin: 0 auto;
}
.Rtable {
display: flex;
height: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.Rtable-cell, .genre-cell, .song-cell, .flag-cell, .link-cell {
box-sizing: border-box;
flex-grow: 0;
width: 100%;
height: 100%;
padding: 0.5em 0em 0.5em 0em;
overflow: hidden;
list-style: none;
color: #000;
font-size: 12px;
text-align: center;
}
.genre-cell {
width: 20% !important;
font-weight: bold;
}
.song-cell {
width: 40% !important;
}
.flag-cell {
width: 30% !important;
}
.link-cell {
width: 10% !important;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable {
position: relative;
top: 1px;
left: 1px;
}
.Rtable-cell {
margin: -1px 0 0 -1px;
border: solid 1px #000000;
}

Answer 1

html, body {
min-height: 100%;
margin: 0 auto;
}
.Rtable {
display: flex;
height: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin: 0;
padding: 0;
}
.Rtable-cell, .genre-cell, .song-cell, .flag-cell, .link-cell {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5em 0em 0.5em 0em;
overflow: hidden;
list-style: none;
color: #000;
font-size: 12px;
text-align: center;
}
.genre-cell {
width: 20% !important;
font-weight: bold;
}
.song-cell {
width: 40% !important;
}
.flag-cell {
width: 30% !important;
}
.link-cell {
width: 10% !important;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable {
position: relative;
top: 1px;
left: 1px;
}
.Rtable-cell {
margin: -1px 0 0 -1px;
border: solid 1px #000000;
}
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell"><div>Song<br /><span class="artist">The Artist</span></div></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell"><div>Song<br /><span class="artist">The Artist</span></div></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
</div>