make panel height match with parent div - html

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.

Answer 2

Add this class in your css.Hope this will be work.
.panel-content {
border: 1px solid red;
padding: 2px;
background: white;
height: 40px;
overflow-y: scroll;
}
Updated : Jsfiddle

Answer 3

There are two ways you an go about this.
Using JavaScript, you can set the height of the children elements to that of the parent, or to the height of another child element, see my JSFiddle example. You can click on the child-2 element and it will take the height of child-1, I added the click just so you could see it taking the other elements height, it will set the height to the same as child-1
In JavaScript
var child1Height = $('.child-1').height();
$('.child-2').height(child1Height);
Alternatively you can use CSS, specify the height of the parent, and insure that the children elements have a height of 100%, child-2 element has a height of 100%, which will take the height of it's parent div that is set to 500px, see my JSFiddle example.
In CSS
.parent{
width:400px;
height: 500px;
}
.child-2{
height:100%;
overflow-y: auto;
}