0

I've searched and can't figure out how to make the contents inside a flexbox panel equalheight. I have the panel itself equal height, but I'd also like the panel-heading and panel-body to be equal height also. I've played around for hours hoping I'd stumble on a solution. In summary I'd like equal height panel (already got) with equal height panel-heading and equal height panel-body.

<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%;
}

I have a codepen that demonstrates the problem . Cheers for any help you can give me.

[EDIT] I've tried adding the following to the codepen with limited success, it seems to work, but then when you resize the browser the content overflows the div for some reason

.panel {
  display: flex;
  flex-direction:column;
  height:100%;
}
.panel-heading, .panel-body {
  height:100%;
  display:inline-flex;
}
philip
  • 403
  • 1
  • 4
  • 14
  • well mixin bootstrap v3 And flex is not a good idea i guess ... simply switch to V4 which is already made with flex – Temani Afif Feb 06 '18 at 11:08
  • @GibinEalias, yeah I'd spotted that but when I applied their solution (in their case to h2 and h3 elements) it didnt give the me the desired results. – philip Feb 06 '18 at 11:49
  • 1
    The dupe link holds both a CSS way and a script way, and explain when they can/need to be used. – Asons Feb 06 '18 at 13:42
  • Original Post updated with an :EDIT: – philip Feb 06 '18 at 16:50
  • Start using `height: 100%` with Flexbox like that is not gonna work properly. The dupe link has the 2 solutions for you. Optionally a fixed minimum height, e.g. [like in this updated codepen](https://codepen.io/anon/pen/ddOzxb), where you might want to control the `min-height`'s value using e.g. a media query, so it doesn't get to small or big compared with the size of the text. The `min-height` also allow it to grow and avoid the overflow `height` creates. – Asons Feb 07 '18 at 19:04

1 Answers1

0

How about using 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>

Check this Codepen.

Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69