html - 如何使用CSS将flexbox中的元素等高(嵌套)[复制]

This question already has answers here:

How to get header from cards or similar to have the same height with flex box?
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
我进行了搜索，无法弄清楚如何使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来说明问题。为您能给我的任何帮助加油。

[编辑]
我尝试将以下内容添加到代码库中，但效果有限，似乎可以正常工作，但是当您调整浏览器大小时，由于某种原因，内容会溢出div

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

最佳答案

如何使用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。

关于html - 如何使用CSS将flexbox中的元素等高(嵌套)[复制]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48641499/