How to auto adjust DIV height according to next sibling height?

Question

I'm looking for a CSS layout solution (IE9+) that will mimic "auto adjustable table cells" like so:

---

The only thing I change using tables, is the bottom cells height, the upper cell automatically response to the change.

Here is the table code and a JSFiddle demo that randomize the bottom cell height.

HTML:

<div>
    <table>
        <tr>
            <td>Auto Adjust</td>
        </tr>
        <tr>
            <td id="adjust">Fixed Height</td>
        </tr>
    </table>
</div>

CSS:

td {
   border:solid 1px red
}
table {
   width:100%;
   height:100%;
}
div {
   height:300px;
   border:solid 1px blue;
}

#adjust{
   height:50px;
}

Q: How can I achieve the same goal using modern layout techniques?

Answer 1

How about this?

http://jsfiddle.net/NicoO/HfpL6/4/

.wrap
{
    height:300px;
    border:solid 1px blue;
}
.table {
    width:100%;
    height:100%;
    display: table;
    border-spacing: 2px;
}

.row
{
    display: table-row;
}

.cell  
{
    display: table-cell;
    border:solid 1px red;
    vertical-align: middle;
}

#adjust{
    height:50px;
}

This html:

<div class="wrap">
    <div class="table">
        <div class="row">
            <div class="cell">
                Auto Adjust
            </div>
        </div>
        <div class="row">
            <div id="adjust" class="cell">
                Fixed Height
            </div>
        </div>
    </div>
</div>

Update

The only other possibility i see is to use calc you sure need some more JS then: http://jsfiddle.net/NicoO/HfpL6/7/

You need to get all children with JS and apply a new height to all of them.

html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap
{
    height:300px;
    border:solid 1px blue;
}
.table 
{
    width:100%;
    height:100%;
}

.row
{
    height: 50%; 
    position: relative;
}

.cell  
{
    border:solid 1px red;
    vertical-align: middle;
    position: absolute;
    top:2px;
    right:2px;
    bottom:2px;
    left:2px;
}

#adjust:not([style])
{
    background-color: green;

}

Answer 2

You could try Flexbox. It is meant to handle layout with both flexible and fixed widths.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes