Flexbox网格儿童100％高度

Question

我有以下标记。 footer-info类具有某些样式，无论显示多少文本，我都希望在每一列内具有相同的高度。

<div class="container-fluid">
    <div class="row">
        <div class="col-md">
            <div class="footer-info">
                 <!-- lots of text -->
            </div>
        </div>
        <div class="col-md">
            <div class="footer-info">
                 <!-- lots of text -->
            </div>
        </div>
        <div class="col-md">

            </div>
        </div>
   </div>

我将flexbox用于网格，具有以下css：

.container-fluid {
    padding-right: 2rem;
    padding-left: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.row {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.col-md {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
}

.footer-info {
    background-color: rgba(36, 36, 36, 0.8);
    color: #f7f7ef;
    padding: 20px;
}

我不想在可能的情况下将样式应用于列类，并且如果可能的话，我也希望避免相对位置/绝对位置。是否有一个优雅的解决方案？

编辑：

我将其放在jsfiddle中：https://jsfiddle.net/ntxc305e/

我想要的结果是每个页脚信息都填充父行的高度（等高列）。

Answer 1

如果我正确理解了您的目标是什么，则可以改成这样的标记：

Answer 2

只需尝试一下：

Answer 3

使用嵌套的flex容器使页脚具有该行的整个高度。将此添加到您的代码中：