make panel height match with parent div

Question

I have created an html stuff using bootstrap 2.3.2 css. The html will be having four rows with different height such as for the first row it will 10%, second row - 20%, third row - 40% and the fourth row - 40% respetively. In third row I have placed a box like panel within each cell, The html is rendering but the problem is the height of the panel is not matching with the parent. Lets say if the content of the panel body exceeds then the panel comes out of the parent like as shown below

Now If the content of the panel body is less then the panel height seems not matching with the parent like as shown below

What I am trying to achieve is that the panel should fill within the parent div no matter whats the body content. when the body content of the panel exceeds the height of the parent div then a vertical scrollbar should come for the panel body.

My code is as given below

JSFiddle

html

<div id="content">
  <div class="row1">
    <div class="row-fluid">
      <div class="span6">content1</div>
      <div class="span6">content1</div>
    </div>
  </div>
  <div class="row2">
    <div class="row-fluid">
      <div class="span6">content2</div>
      <div class="span6">content2</div>
    </div>
  </div>
  <div class="row3">
    <div class="row-fluid">
      <div class="span4">
        <div class="panel">
          <div class="panel-header well" data-original-title="">
            <h5><i class="icon-th"></i> Grid 3</h5>
          </div>
          <div class="panel-content">
            fgdfg dad dsd dsadsad ds adsa d das ds dsa dsad sa d ad as dsad sa d sda dsa sa das dsa da asd sad
          </div>
        </div>
      </div>
      <div class="span4">
        <div class="panel">
          <div class="panel-header well" data-original-title="">
            <h5><i class="icon-th"></i> Grid 3</h5>
          </div>
          <div class="panel-content">
            fgdfg
          </div>
        </div>
      </div>
      <div class="span4">content3</div>
    </div>
  </div>
  <div class="row4">
    <div class="row-fluid">
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
    </div>
  </div>
</div>

Answer 1

Try flexbox.

Adjustments to CSS:

.row3 {
    height: 40%;
    background: orange;
    display: flex;
}

.row3 > .row-fluid {
    display: flex;
}

.row-fluid > .span4 {
    display: flex;
}

.panel {
    display: flex;
    flex-direction: column;
}

.panel-header {
    /* padding-bottom: 10px; */
    /* min-height: 12px; */
}

.panel-content {
   overflow-y: auto;
}

DEMO

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.