1

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:

enter image description here

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"><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:

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;
    }
BlueDogRanch
  • 721
  • 1
  • 16
  • 43
  • https://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Dec 30 '19 at 16:28
  • so I looked over your code and I see that using % as the value type for the divs associated with your flex container is not working. I read about this issue on a couple of forums; it would seem that this issue is somewhat common. I played with your code a bit to try to get it to work, but to adjust the code and find a solution I need to know more about what you are trying to do. Is the whole thing supposed to be 100% or just specific containers? – JΛYDΞV Dec 30 '19 at 16:49
  • Also I switched from flex box to using grid when creating layouts, and honestly I never looked back. Just FYI – JΛYDΞV Dec 30 '19 at 16:50
  • Also, see this: https://stackoverflow.com/q/25311541/3597276 – Michael Benjamin Dec 30 '19 at 17:44

1 Answers1

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"><a href="#">Link</a></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"><a href="#">Link</a></div>

</div>
Ahed Kabalan
  • 815
  • 6
  • 8