如何在頁腳和主要內容未填充的同時在Flexbox中伸展側邊欄？

Question

以下是屏幕截圖：http://imgur.com/mNJNJ2t

我想讓右側邊欄伸展頁腳。這裏是我的標記：

<header> 
    Fixed position header 
</header> 

<main> 
    <article> 
     <form method="post" class="row"> 
      <div class="col-l-2 padding-20"> 
       Table here 
      </div> 

      <div class="col-l-2 sidebar"> 
       Checkout stuff here 
      </div> 
     </form> 
    </article> 
</main> 

<footer> 
Footer here 
</footer> 

這裏是CSS：

body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    padding-top: 80px /* header height: 80px */ 
} 

main { 
    flex: 1; 
} 

.row { 
    display: flex; 
    flex-direction: row; 
} 

.col-l-1 { 
    flex: 1; 
} 

.col-l-2 { 
    flex: 2; 
} 

.padding-20 { 
    padding: 20px; 
} 

.sidebar { 
    background: #f8f8f8; 
} 

div, article { display: block; } 

我沒有在這裏添加供應商前綴以提高可讀性。身體的最小高度和柔性模型是爲了使頁腳粘到底部。我不介意餐桌/餐車區域是否也延伸。我所需要做的就是讓側欄變爲最小高度：100％，並且不要將頁腳推到底部，而是延伸直到觸到頁腳底部。我知道這聽起來很瘋狂，但使用main { flex: 1}能夠將頁腳放在底部，我需要的是使排類最小高度達到main的100％高度。

編輯：Pen/Fiddle

Answer 1

主要應該有display: flex太和DIV，文章和形式應該有display: flex和flex: 1

body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    padding-top: 80px /* header height: 80px */ 
} 

main { 
    display: flex; 
    flex: 1; 
} 

.row { 
    display: flex; 
    flex-direction: row; 
} 

.col-l-1 { 
    flex: 1; 
} 

.col-l-2 { 
    flex: 2; 
} 

.padding-20 { 
    padding: 20px; 
} 

.sidebar { 
    background: #f8f8f8; 
} 

div, article, form { display: flex; flex:1 } 

http://jsfiddle.net/1rLzf95d/

Answer 2

如果添加了一個高度，你.row類將延伸其子女相同的高度。例如.row { display: flex; min-height: 100vh; flex-direction: row; }