Flexbox / Bootstrap 4 - 拉伸元素到父级的剩余高度

Question

我有一行，包含三列。 每列包含一个img和一个标题。

目前看来是这样的：

在大屏幕上，标题显示在一行上，一切都很好。

但是在调整大小时，第一个标题现在分为两行：

我试图做的是让另外两个标题伸展，所以它们将与第一个标题具有相同的高度，并且还有以Verticaly为中心，如下所示：

有没有办法使用flexbox实现这个目标？

我尝试了在搜索＆＃34; flexbox拉伸/填充高度时找到的各种解决方案＆＃34;但是当我试图让它们适应我的代码时，没有一个工作。 （我尝试将每个列的内容包含在div中，包含display:flex和flex-direction:column，并且标题位于div中flex:1但没有成功）

HTML CODE：

    <section id="home_univers">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <img alt="Animaux de compagnie" src="http:/placehold.it/450x210" alt="">
                        <div class="test"><h3 class="bg_rose">aaaaaaa aa aaaaaaaaa</h3></div>
                    </div>
                    <!-- /.col-lg-4 -->
                    <div class="col-lg-4">
                        <img alt="Chevaux" src="http:/placehold.it/450x210" alt="">
                        <div class="test"><h3 class="bg_vert">aaaaaaa</h3></div>
                    </div>
                    <!-- /.col-lg-4 -->
                    <div class="col-lg-4">
                        <img alt="Animaux de rente" src="http:/placehold.it/450x210" alt="">
                        <div class="test"><h3 class="bg_blue">aaaaaaa aa aaaaa</h3></div>
                    </div>
                    <!-- /.col-lg-4 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container -->
        </section>

CSS代码：

.blue {
  color: #0033a0;
}

.bg_blue {
  background-color: #0033a0;
}

.rose {
  color: #ff7a6d;
}

.bg_rose {
  background-color: #ff7a6d;
}

.vert {
  color: #8dad20;
}

.bg_vert {
  background-color: #8dad20;
}

#home_univers {
  padding-top: 85px;
  padding-bottom: 85px;
}

#home_univers h3 {
  text-transform: uppercase;
  color: #fff;
  font-size: 24px;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
}

#home_univers img {
  width: 100%;
}

JS小提琴：https://jsfiddle.net/owvs550p/

Answer 1

HTML

<section id="home_univers">
    <div class="container">
        <div class="row">
            <div class="col-4">
                    <img alt="Animaux de compagnie" src="http:/placehold.it/450x210" alt="">

            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4">
                    <img alt="Chevaux" src="http:/placehold.it/450x210" alt="">

            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4">
                    <img alt="Animaux de rente" src="http:/placehold.it/450x210" alt="">

            </div>
            <!-- /.col-lg-4 -->
        </div>
        <div class="row">
            <div class="col-4 color">


                    <div class="test  bg_rose"><h3 class="">aaaaaaa aa aaaaaaaaa</h3></div>
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4 color">

                <div class="test bg_vert"><h3 class="">aaaaaaa</h3></div>
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4 color">

                    <div class="test bg_blue"><h3 class="">aaaaaaa aa aaaaa</h3></div>
            </div>
            <!-- /.col-lg-4 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

.orange {
    color: #ffba00;
}

.bg_orange {
    background-color: #ffba00;
}

.blue {
    color: #0033a0;
}

.bg_blue {
    background-color: #0033a0;
}

.rose {
    color: #ff7a6d;
}

.bg_rose {
    background-color: #ff7a6d;
}

.vert {
    color: #8dad20;
}

.bg_vert {
    background-color: #8dad20;
}

#home_univers {
    padding-top: 85px;
    padding-bottom: 85px;
}

#home_univers h3 {
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
}
#home_univers img {
    width:100%;
}
.col-4.color {
  display: flex;
}
.test {
      flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}