Regangkan tinggi div turunan untuk mengisi induk yang memiliki tinggi dinamis

Seperti yang dapat dilihat pada biola berikut, saya memiliki dua divs, yang terdapat di dalam induk divyang direntangkan untuk memuat div besar, tujuan saya adalah membuat anak divitu sama tingginya.

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

Solusinya adalah menggunakan display: table-celluntuk membawa elemen tersebut sebaris daripada menggunakan display: inline-blockatau 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>

Bekerja Fiddle

Gunakan display: flexuntuk meregangkan tubuh Anda div:

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

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

JSFIDDLE

Tambahkan CSS berikut:

Untuk div induk:

style="display: flex;"

Untuk div anak:

style="align-items: stretch;"

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

Saya pikir Anda dapat menggunakan tampilan sebagai kisi:

.parent { display: grid };

Anda dapat melakukannya dengan mudah dengan sedikit jQuery

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