フレックスボックスのコンテナの高さが伸びない

Question

フレックスボックスを使用している3つのボックスがあります。私が着目している問題は、ボックスの1つにフッターがないため、他の2つのボックスと同じ高さを持たないということです。フッタがなくても3つのボックスを同じ高さに伸ばす方法はありますか？

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

例：http://codepen.io/pertrai1/pen/RRZOOK

Answer 1

3セクション/箱が同じ高さあり、それはそれらのどれもが適用背景色を持っていないだけのことです。

デフォルトの色をボックスに適用し、を特定のセクションのbg色に上書きすることをお勧めします。

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

Codepen Demo