html - 如何在有页脚和未填充的主要内容的情况下在 flexbox 中拉伸(stretch)侧边栏？

Question

这是屏幕截图:http://imgur.com/mNJNJ2t

我想让右侧边栏拉伸(stretch)页脚。这是我的标记:

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

为了便于阅读，我没有在此处添加供应商前缀。 body 中的 min-height 和 flex 模型是为了让页脚贴在底部。我不介意 table /推车区域是否也拉伸(stretch)。我所需要的只是让侧边栏变为 min-height: 100% 并且不要将页脚推到底部而是拉伸(stretch)直到它接触底部的页脚。我知道这听起来很疯狂，但是使用 main { flex: 1} 能够将页脚放在底部，我需要做的就是使行类最小高度为 main 的 100% 高度。

编辑:Pen/Fiddle

Answer 1

main 也应该有 display: flex 和 div，article 和 form 应该有 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/