Bootstrap 3 flex box issue with columns

Question

I seem to be having an issue trying to use flexbox with bootstrap 3 columns. I have the below code which can be previewed on jsfiddle here

<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
        <div class="panel-heading">Box 1</div>

        <div class="panel-body">
            <table class="col-md-12 text-left">
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                </tr>
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                        <td>Value</td>
                </tr>
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
        <div class="panel-heading">Box 2</div>
        <div class="panel-body">
           <table class="col-md-12 text-left">
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="col-xs-12 col-lg-6 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
        <div class="panel-heading">Box 3</div>
        <div class="panel-body">
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        </div>
    </div>
</div>

with css:

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

I have tried a few different css snippets but I either end up with equal width column which i do not want as i want col-xs-* to persist or I can get equals heights but again it throws the widths off.

What I am trying to achieve is equal height for all 3 panels but the column widths from the classes to be taken into account.

Any guidance to what I am missing would be much appreciated.

Solution

You can add display: flex for the widget-header-div and height: 100% for .panel - and you will have same heights for the columns.

If you want to take the widths into consideration in the responsive context, you can make your flexbox wrap.

See demo below:

.widget-header-div {
  display: flex;
  flex-wrap: wrap;
}

.widget-header-item .panel {
  height: 100%;
}
.widget-header-item {
  margin-bottom: 20px;
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="col-xs-12 widget-header-div">

  <div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
      <div class="panel-heading">Box 1</div>

      <div class="panel-body">
        <table class="col-md-12 text-left">
          <tr>
            <td>Key</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Key</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Key</td>
            <td>Value</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
      <div class="panel-heading">Box 2</div>
      <div class="panel-body">
        <table class="col-md-12 text-left">
          <tr>
            <td>Key</td>
            <td>Value</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-lg-6 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
      <div class="panel-heading">Box 3</div>
      <div class="panel-body">
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
      </div>
    </div>
  </div>

</div>