Stretch child div height to fill parent that has dynamic height
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
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
Add the following CSS:
For the parent div:
style="display: flex;"
For child div:
style="align-items: stretch;"
https://www.youtube.com/watch?v=jV8B24rSN5o
I think you can use display as grid:
.parent { display: grid };