Stretch child div height to fill parent that has dynamic height

Problem

As it can be seen in the following fiddle, I have two divs, contained in a parent div that have stretched to contain the big div, my goal is to make those child divs equal in height.

http://fiddle.jshell.net/y9bM4/

Problem courtesy of: Khaled

Solution

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}
<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Working Fiddle

Solution courtesy of: Mr_Green - divami.com

Discussion

This question was asked 3 years and 8 months ago and has been viewed 44,830 times as of April 2017.

So for anyone reading this in the future:

The best option to solve this problem is to use display: flex; with the property align-items: stretch;. This is similar to @TrongLamPhan answer but he didn't use align-items: stretch.

CSS Breakdown:

  • on the parent-div set the display to flex. This will set the parent-div's display mode to flexbox which enables the
  • align-items property to be used. Set this property to stretch to have the child-divs stretch to match.

CSS Tricks has a pretty good tutorial on flexbox. I would highly recommending learning flexbox in 2017 because its a very powerful layout tool and it's been around long about to be stable in all major browsers.

* {
  font-family: sans-serif;
}

.parent-div {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #ddd;
  display: flex;
  align-items: stretch;
}

.child-div {
  flex: 1; /*this property is only here to make each child the same width*/
  margin: 0.5em;
  padding: 0.5em;
  background-color: #eee;
}
<div class="parent-div">
  <div class="child-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="child-div">This child div should be the same size!</div>
</div>

Discussion courtesy of: Rico Kahler

Add the following CSS:

For the parent div:

style="display: flex;"

For child div:

style="align-items: stretch;"
Discussion courtesy of: Ayan

You can do it easily with a bit of jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});
Discussion courtesy of: Levon Matevosyan

Use display: flex to stretch your divs:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    display:inline-block;
    vertical-align:top;
    margin-left: 10px;
}
.text {
    font-family: 12px Tahoma, Geneva, sans-serif;
    color:#555;
}

JSFIDDLE

Discussion courtesy of: Trong Lam Phan

This recipe can be found in it's original form on Stack Over Flow.