pertrai1 pertrai1 - 1 year ago 109
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">
<h1 class="subject">Total Viewing Time</h1>
<div class="main">
<h2 class="count-large">30.45</h2>
<div class="left">
<h1 class="title">Internal</h2>
<span class="count">
<div class="right">
<h1 class="title">Public</h1>
<span class="count">


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download