如何使用 CSS 使 flexbox 中的元素等高（嵌套）[重复]

Question

我已经搜索过，但无法弄清楚如何使 flexbox 面板中的内容等高。我让面板本身的高度相同，但我也希望面板标题和面板主体的高度也相同。我已经玩了几个小时，希望能偶然找到解决方案。 总之，我想要相等高度的面板（已经得到），面板标题和面板高度相等。

<div class="container">
  <div class="row">
    <div class="flex-equalheight">
      <div class="col-md-3 col-sm-4 col-xs-12 equal">
        <div class="panel panel-yellow bells-shadow" style="text-align: center;">
          <div class="panel-heading">Line 1</div>
      <p class="panel-body panel-statement">understand your company's website goals<br>understand your company's website goals<br>understand your company's website goals</p>
    </div>
  </div>
  <div class="col-md-3 col-sm-4 col-xs-12 equal">
    <div class="panel panel-yellow bells-shadow" style="text-align: center;">
      <div class="panel-heading">Line 1<br>Line 2</div>
      <p class="panel-body panel-statement">benchmark you agains your competition</p>
    </div>
  </div>
</div>

/*  START THE EQUAL HEIGHT FLEX MAGIC */
.flex-equalheight, .equal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex: 1 1 0px;
margin-bottom: 15px;
}
.flex-equalheight .panel {
  min-width:100%;
}

我有一个 codepen 来演示这个问题。为你能给我的任何帮助干杯。

[编辑] 我尝试将以下内容添加到 codepen，但成功有限，它似乎可以工作，但是当您调整浏览器大小时，由于某种原因，内容会溢出 div

.panel {
  display: flex;
  flex-direction:column;
  height:100%;
}
.panel-heading, .panel-body {
  height:100%;
  display:inline-flex;
}

Answer 1

用jquery-match-height怎么样

$(function() {
  $('.panel-heading').matchHeight();
});

body {
  padding: 20px;
}

.panel-yellow {
  border-color: #e2dd43;
}

.panel-yellow>.panel-heading {
  color: #2c399e;
  background-color: #e2dd43;
  border-color: #e2dd43;
}

.panel-heading {
  font-size: 1.2em;
}

.bells-shadow {
  transition-property: color, background-color, box-shadow, transform;
  transition-duration: .55s;
}

.bells-shadow {
  box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
}

.bells-shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(50, 50, 93, .1), 0 8px 15px rgba(0, 0, 0, .07);
}


/*  START THE EQUAL HEIGHT FLEX MAGIC */

.flex-equalheight,
.equal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1 1 0px;
  margin-bottom: 15px;
}

.flex-equalheight .panel {
  min-width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<div class="container">
  <div class="row">
    <div class="flex-equalheight">
      <div class="col-md-3 col-sm-4 col-xs-12 equal">
        <div class="panel panel-yellow bells-shadow" style="text-align: center;">
          <div class="panel-heading">Line 1</div>
          <p class="panel-body panel-statement">understand your company's website goals<br>understand your company's website goals<br>understand your company's website goals</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-12 equal">
        <div class="panel panel-yellow bells-shadow" style="text-align: center;">
          <div class="panel-heading">Line 1<br>Line 2</div>
          <p class="panel-body panel-statement">benchmark you agains your competition</p>
        </div>
      </div>
    </div>
  </div>
</div>

检查此Codepen。