pertrai1 pertrai1 - 3 months ago 29
CSS Question

Flexbox containers not stretching height

I have a codepen that I am working on that has 3 boxes that I am using flexbox with. The issue I am coming into is that one of the boxes does not have a footer so it does not have the same height as the other 2 boxes. Is there a way to have the 3 boxes stretch to the same height even if there is no footer?

<article class="box-orange">
<header>
<h1 class="subject">Total Viewing Time</h1>
</header>
<div class="main">
<h2 class="count-large">30.45</h2>
</div>
<footer>
<div class="left">
<h1 class="title">Internal</h2>
<span class="count">
100
</span>
</div>
<div class="right">
<h1 class="title">Public</h1>
<span class="count">
245
</span>
</div>
</footer>
</article>


Example: http://codepen.io/pertrai1/pen/RRZOOK

Answer

The three sections/boxes are the same height, it's just that none of them have a background color applied.

I'd suggest you apply your default colors to the boxes and override that bg color for specific sections.

.box-green {
  background: #9fcf91;
  /* added this */
}

Codepen Demo

Comments