I've been grappling with this issue for quite some time now, but have yet to find a satisfactory solution.
Below is the code that I've been working with:
CSS
.parent{
width:100px;
display:table;
border:1px solid green;
}
.child{
width:50px;
background:blue;
display:table-cell;
height: inherit;
}
.child + .child{
background:red;
}
HTML
<body>
<div class="parent">
<div class="child">a <br/> b<br/> b<br/> b<br/> b<br/> b<br/> b</div>
<div class="child" style="border: 2px dashed black">
<fieldset style="height:100%;">a</fieldset>
</div>
</div>
</body>
I'm aiming to have the fieldset within the second child div match the height of its parent div. In other words, the height of the fieldset should be the same as that of the child div.
Any ideas on how I can achieve this?