如何使用flexbox在一个容器中匹配两个不同的高度

Question

我有一个问题，使标题包装器的高度相同。我试图避免：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

目前我的代码正在努力使高度完全相同，但当我删除上面的代码并添加display：flex;如果它进入2或3行，那么另一个需要的css它与标题的高度不匹配。任何可以帮助我看到我不能做的人都是惊人的。我仍然是一个菜鸟，但我每天都在变得更好。

CSS：

.content-block-wrapper {
    width: 100%;
}

.content-block-body {
    min-height: 300px;
}

.content-block-cycle:nth-of-type(8n) {
    .content-block-header {
        @include theme-color-1-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-1-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-1-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+1) {
    .content-block-header {
        @include theme-color-2-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-2-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-2-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+2) {
    .content-block-header {
        @include theme-color-3-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-3-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-3-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+3) {
    .content-block-header {
        @include theme-color-4-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-4-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-4-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+4) {
    .content-block-header {
        @include theme-color-5-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-5-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-5-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+5) {
    .content-block-header {
        @include theme-color-6-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-6-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-6-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+6) {
    .content-block-header {
        @include theme-color-7-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-7-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-7-light(color);
    }
}

.content-block-cycle:nth-of-type(8n+7) {
    .content-block-header {
        @include theme-color-8-light(background-color);
    }

    .content-block-wrapper {
        @include theme-color-8-dark(background-color);
    }

    .content-block-btn-wrapper > .btn-white {
        @include theme-color-8-light(color);
    }
}

.content-block-headline-wrapper {
    margin: 0 0 30px;
}

.content-block-wrapper {
    margin: 15px 0;
}

.content-block-header {
    background-color: inherit;
    border-bottom: 2px solid $white;
    padding: 7.5px 15px;
}

.content-block-header > h3, .content-block-header > h3 > a {
    color: $white;
    text-align: center;
    margin: 0;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

.content-block-header > h3 > a:hover, .content-block-header > h3 > a:focus {
    text-decoration: none;
    cursor: pointer;
}

.content-block-body {
    background-color: inherit;
    width: 100%;
    padding: 15px;
    text-align: center;
    height: auto;
}

.content-block-body ul {
  margin: 0 0 15px 0;
  padding: 0;
  list-style-position: inside;
  width: 100%;
}

.content-block-body {
    @include colored-background-override();
    text-align: left;
}

.content-block-dynamic {
    padding-bottom: 45px;
}

.btn-white {
    background-color: #fff;
    color: inherit;
    margin: 0 auto;

    &:hover, &:active, &:focus {
        background-color: $light-grey;
    }
}


.content-block > .row{
    display: flex;
    flex-wrap: wrap;

    > [class*='col-'] {
        display: flex;
        flex-direction: row;
    }
}
.content-block .row:before{
  display:block;
}


.content-block-btn-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
    width: 100%;
    margin: 0;
}

@media screen and (max-width: $screen-sm-max) {
  .content-block .row .col-sm-6{
    width:50%;
  }
}
@media screen and (max-width: $screen-xs-max) {
    .content-block {
        display: block;
    }
    .content-block .row .col-sm-6{
      width:100%;
    }
}

HTML：

<div class="content-block-container">
  <div class="container">
      <div class="col-md-12">
        <div class="content-block-headline-wrapper">
          <h2 class="primary">Component Header</h2>
          <p>
            Optional intro copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
          </p>
        </div>
      </div>
  </div>
  <div class="container">
    <div class="content-block">
      <div class="row">
        <div class="col-md-3 col-sm-6 content-block-cycle">
            <div class="content-block-wrapper">
              <div class="content-block-header">
                <h3><a href="#">Subheader Topic</a></h3>
              </div>
              <div class="content-block-body">
                <div class="content-block-dynamic">
                  <ul>
                    <li>Body copy should be below</li>
                    <li>More of a list here</li>
                    <li>Body copy should be below</li>
                    <li>More of a list here</li>
                  </ul>
                </div>
                  <div class="content-block-btn-wrapper">
                      <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                  </div>
              </div>
            </div>
          </div>


      <div class="col-md-3 col-sm-6 content-block-cycle">
          <div class="content-block-wrapper">
            <div class="content-block-header">
              <h3><a href="#">Subheader Topic</a></h3>
            </div>
            <div class="content-block-body">
              <div class="content-block-dynamic">
                <ul>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                </ul>
              </div>
                <div class="content-block-btn-wrapper">
                    <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                </div>
            </div>
          </div>
        </div>


        <div class="col-md-3 col-sm-6 content-block-cycle">
            <div class="content-block-wrapper">
              <div class="content-block-header">
                <h3><a href="#">Subheader Topic</a></h3>
              </div>
              <div class="content-block-body">
                <div class="content-block-dynamic">
                  <ul>
                    <li>Body copy should be below</li>
                    <li>More of a list here</li>
                    <li>Body copy should be below</li>
                    <li>More of a list here</li>
                  </ul>
                </div>
                  <div class="content-block-btn-wrapper">
                      <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                  </div>
              </div>
            </div>
          </div>


          <div class="col-md-3 col-sm-6 content-block-cycle">
              <div class="content-block-wrapper">
                <div class="content-block-header">
                  <h3><a href="#">Subheader Topic</a></h3>
                </div>
                <div class="content-block-body">
                  <div class="content-block-dynamic">
                    <ul>
                      <li>Body copy should be below</li>
                      <li>More of a list here</li>
                      <li>Body copy should be below</li>
                      <li>More of a list here</li>
                    </ul>
                  </div>
                    <div class="content-block-btn-wrapper">
                        <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                    </div>
                </div>
              </div>
            </div>


            <div class="col-md-3 col-sm-6 content-block-cycle">
                <div class="content-block-wrapper">
                  <div class="content-block-header">
                    <h3><a href="#">Subheader Topic</a></h3>
                  </div>
                    <div class="content-block-body">
                        <div class="content-block-dynamic">
                            <ul>
                                <li>Body copy should be below</li>
                                <li>More of a list here</li>
                                <li>Body copy should be below</li>
                                <li>More of a list here</li>
                            </ul>
                        </div>

                        <div class="content-block-btn-wrapper">
                            <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                        </div>
                    </div>

                </div>
              </div>


              <div class="col-md-3 col-sm-6 content-block-cycle">
                  <div class="content-block-wrapper">
                    <div class="content-block-header">
                      <h3><a href="#">Subheader Topic Longer yet see what happens</a></h3>
                    </div>
                    <div class="content-block-body">
                      <div class="content-block-dynamic">
                        <ul>
                          <li>Body copy should be below</li>
                          <li>More of a list here</li>
                          <li>Body copy should be below</li>
                          <li>More of a list here</li>
                        </ul>
                      </div>
                        <div class="content-block-btn-wrapper">
                            <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                        </div>
                    </div>
                  </div>
                </div>


                <div class="col-md-3 col-sm-6 content-block-cycle">
                    <div class="content-block-wrapper">
                      <div class="content-block-header">
                        <h3><a href="#">Subheader Topic</a></h3>
                      </div>
                      <div class="content-block-body">
                        <div class="content-block-dynamic">
                          <ul>
                            <li>Body copy should be below</li>
                            <li>More of a list here</li>
                            <li>Body copy should be below</li>
                            <li>More of a list here</li>
                          </ul>
                        </div>
                          <div class="content-block-btn-wrapper">
                              <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                          </div>
                      </div>
                    </div>
                  </div>



                  <div class="col-md-3 col-sm-6 content-block-cycle">
                      <div class="content-block-wrapper">
                        <div class="content-block-header">
                          <h3><a href="#">Subheader Topic Extra Long Header</a></h3>
                        </div>
                        <div class="content-block-body">
                          <div class="content-block-dynamic">
                            <ul>
                              <li>Body copy should be below</li>
                              <li>More of a list here</li>
                              <li>Body copy should be below</li>
                              <li>More of a list here</li><li>Body copy should be below</li>
                              <li>More of a list here</li>
                              <li>Body copy should be below</li>
                              <li>More of a list here</li><li>Body copy should be below</li>
                              <li>More of a list here</li>
                              <li>Body copy should be below</li>
                              <li>More of a list here</li>
                            </ul>
                          </div>
                            <div class="content-block-btn-wrapper">
                                <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
</div>

<!-- Three Column Content Blocks -->
<div class="content-block-container">
  <div class="container">
    <div class="content-block">
      <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-12 content-block-cycle">
          <div class="content-block-wrapper">
            <div class="content-block-header">
              <h3><a href="#">Subheader Topic</a></h3>
            </div>
            <div class="content-block-body">
              <div class="content-block-dynamic">
                <ul>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                </ul>
              </div>
                <div class="content-block-btn-wrapper">
                    <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                </div>
            </div>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="col-md-4 col-sm-4 col-xs-12 content-block-cycle">
          <div class="content-block-wrapper">
            <div class="content-block-header">
              <h3><a href="#">Subheader Topic</a></h3>
            </div>
            <div class="content-block-body">
              <div class="content-block-dynamic">
                <ul>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                </ul>
              </div>
                <div class="content-block-btn-wrapper">
                    <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                </div>
            </div>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="col-md-4 col-sm-4 col-xs-12 content-block-cycle">
          <div class="content-block-wrapper">
            <div class="content-block-header">
              <h3><a href="#">Subheader Topic</a></h3>
            </div>
            <div class="content-block-body">
              <div class="content-block-dynamic">
                <ul>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                </ul>
              </div>
                <div class="content-block-btn-wrapper">
                    <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                </div>
            </div>
          </div>
        </div>


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

<!-- Two Column Content Block -->
<div class="content-block-container">
  <div class="container">
    <div class="content-block">
      <div class="row">
        <div class="col-md-6 col-sm-6 content-block-cycle">
          <div class="content-block-wrapper">
            <div class="content-block-header">
              <h3><a href="#">Subheader Topic</a></h3>
            </div>
            <div class="content-block-body">
              <div class="content-block-dynamic">
                <ul>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                </ul>
              </div>
                <div class="content-block-btn-wrapper">
                    <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                </div>
            </div>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="col-md-6 col-sm-6 content-block-cycle">
          <div class="content-block-wrapper">
            <div class="content-block-header">
              <h3><a href="#">Subheader Topic</a></h3>
            </div>
            <div class="content-block-body">
              <div class="content-block-dynamic">
                <ul>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                  <li>Body copy should be below</li>
                  <li>More of a list here</li>
                </ul>
              </div>
                <div class="content-block-btn-wrapper">
                    <a class="btn btn-white btn-xlrg" href="#">Here is a white button</a>
                </div>
            </div>
          </div>
        </div>


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