JS - Flexible Height

by abhitalks

HTML

<div class="flexv">
    <div>36px Fixed Height</div>
    <div>Variable Content Height</div>
    <div>Flexible Remaining Height</div>
</div>

<div class="flexv">
    <div>36px Fixed Height</div>
    <div><img src='//placehold.it/64x72/66c' /></div>
    <div>Flexible Remaining Height</div>
</div>

<div class="flexv">
    <div>36px Fixed Height</div>
    <div>Variable Text Height</div>
    <div>
        <img src='//placehold.it/72x48/66c' />
        <p>Variable Content Height</p>
    </div>
    <div>Flexible Remaining Height</div>
</div>

CSS

div.flexv {
    display: inline-table; box-sizing: border-box; padding: 0; margin: 0; 
    overflow: hidden;
    /* Override your custom styling below */
    height: 320px; width: 20%; border: 1px solid black; font-size: 1em;
    margin: 8px;
}
div.flexv > div { 
    display: block; height: auto; box-sizing: border-box; 
    overflow: hidden;
    /* Override your custom styling below */
    background-color: lightgreen; border: 1px solid #ddd;
    padding: 5px 15px;
}
div.flexv > div:first-child {
    /* Override your custom styling below */
    min-height: 36px; height: 36px; max-height: 36px; 
    background-color: orange;
}
div.flexv > div:last-child {
    height: 100%;
    /* Override your custom styling below */
    background: skyblue;
}

JavaScript

document.addEventListener("load", flexit);

function flexit(e) {
	var flexv = document.querySelectorAll('div.flexv');
	[].forEach.call(flexv, function(div) {
		var children = [].slice.call(div.children), 
			flexChild = children.splice(-1, 1), 
			usedHeight = 0, totalHeight = div.offsetHeight;
		children.forEach(function(elem) {
			usedHeight += elem.offsetHeight;
		});
		flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
	});
}