[css] Stretch child div height to fill parent that has dynamic height

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/

https://www.youtube.com/watch?v=jV8B24rSN5o

I think you can use display as grid:

.parent { display: grid };

You can do it easily with a bit of jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

Use display: flex to stretch your divs:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Add the following CSS:

For the parent div:

style="display: flex;"

For child div:

style="align-items: stretch;"