Bootstrap - panels with same height and width

Question

I'm having a div.row that contains 3 panels with different contents:

<div class="row equal">

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 1</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 2</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 3</h3>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

</div>

I'd like to set all panels to have the same height, no matter their content, like on this topic Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row, so I have set my .equal class.

.equal, .equal > div[class*='col-'] {  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
}

The problem is that, although the height is set equal to all panels the width of each panel has changed, so now my panels don't have the same width (the default one).

Is there a way I can fix the width too, or maybe use another way to have in all my panels same width and height?

JSFiddle

Answer 1

I think you want something like this:

Setting separated for ease of reference.

.equal {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

div[class*='col-'] {
  flex:1 1 auto;
  background: lightblue;
  display: flex;
}
.panel {
  flex:1 0 100%;
}

Codepen Demo