Having scoured through numerous questions and answers, I'm still stuck on why I can't achieve 100% height for certain flexbox columns. Specifically, trying to make the "Genre" column with one line of text match the height of the "Song & The Artist" column with two lines, all while centering the text vertically:
Codepen Link: https://codepen.io/bluedogranch/pen/ZEYXGmx
HTML Markup:
<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"><a href="#">Link</a></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"><a href="#">Link</a></div>
</div>
CSS Styling:
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;
}