Flexible box

by jslayer

HTML

<div class="box">
    <div class="h">
        Hello<br/>Cruel<br/>World
    </div>
    <div class="m">
        <img src="http://goo.gl/a1smCR" alt="" />
    </div>
    <div class="b">
        Omg
    </div>
</div>

CSS

.box {
    display: table;
    width: 640px;
    height: 480px;
    background: red;
}

.h, .m, .b {
    display: table-row;
}

.h {
    background: yellow;
    height: 0;
}

.m {
    background: green;
}

.m img {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: block;
}

.b {
    background: blue;
    height: 0;
}