Edit in JSFiddle

.item {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    float: right;
    max-width: 150px;
    max-height: 150px;
}
.box {
    width: 600px;
    height: 200px;
    display: inline-block;
    line-height: 0px;
    margin: 0px;
    position: relative;
}
.fixed {
    position: absolute;
    top: 0;
    left: 0;
}
.slider {
    width: 600px;
    height:20px;
}
.blue {
    border-width: 1px;
    border-style: dotted;
    border-color: blue;
    overflow: hidden;
}
.vertical {
    width: 200px;
    height:20px;
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    transform: rotate(90deg) translateY(200px);
    -webkit-transform: rotate(90deg) translateY(200px);
    vertical-align: bottom;
}
.container {
    width: 1000px;
    height: 250px;
    overflow: hidden;
    display: inline-block;
}
.flextainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-around;
    justify-content: space-around;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: center;
    -webkit-align-content: space-around;
    -webkit-justify-content: space-around;
}
.A {
    min-width: 40px;
    min-height: 40px;
    line-height: 12px;
    font-size: 12px;
    color: yellow;
    background-color: purple;
    border-color: cyan;
    -webkit-flex: 3 1 auto;
    flex: 3 1 auto;
}
.B {
    min-width: 55px;
    min-height: 55px;
    line-height: 24px;
    font-size: 24px;
    background-color: goldenrod;
    border-color: darkblue;
    -webkit-flex: 9 1 auto;
    flex: 9 1 auto;
}
select {
    width: 80px;
}

body{
    overflow:hidden;
}

Troy Whorten's Flexbox Demo: (click boxes to remove them)<br/>
<div class="container">
    <div class="box">
        <div id="target" class="fixed blue box flextainer">
            <div class="item A" onclick="this.parentNode.removeChild(this)">foo</div>
            <div class="item B" onclick="this.parentNode.removeChild(this)">bar</div>
        </div>
    </div>
    <input class="vertical slider" type="range" min="0" max="100" step="5" value="100" onchange="document.getElementById('target').style.height = this.value + '%';" />
    <br/>
    <input class="slider" type="range" min="0" max="100" step="5" value="100" onchange="document.getElementById('target').style.width = this.value + '%';" />
</div>
<br/>
<button onclick="addBox()">Add Box</button>
<select onchange="changeFlex('flexDirection',this)">
    <optgroup label="flex-direction">
        <option value="row">row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
    </optgroup>
</select>
<select onchange="changeFlex('flexWrap',this)">
    <optgroup label="flex-wrap">
        <option value="wrap">wrap</option>
        <option value="nowrap">nowrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
    </optgroup>
</select>
<select onchange="changeFlex('alignItems',this)">
    <optgroup label="align-items">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
    </optgroup>
</select>
<select onchange="changeFlex('alignContent',this)">
    <optgroup label="align-content">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="stretch">stretch</option>
    </optgroup>
</select>
<select onchange="changeFlex('justifyContent',this)">
    <optgroup label="justify-content">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
    </optgroup>
</select>
<br/>Change Foo Size:
<input type="range" min="10" max="150" onchange="sizeBox('A',this.value)" />Change Bar Size:
<input type="range" min="10" max="150" onchange="sizeBox('B',this.value)" />

//written by Troy Whorten 3/25/2014

var currentBox = 'A';

function addBox() {
    var target = document.getElementById("target");
    var box = document.createElement("div");
    box.setAttribute("class", "item " + currentBox);
    box.setAttribute("onclick", "this.parentNode.removeChild(this)");

    if (currentBox == 'A') {
        box.innerHTML = "foo";
        currentBox = 'B';
    } else {
        box.innerHTML = "bar";
        currentBox = 'A';
    }

    target.appendChild(box);
}

function changeFlex(prop, el) {
    var target = document.getElementById("target");
    execstring = "target.style." + prop + "=el.value;";
    eval(execstring);
    execstring = "target.style." + capitalize(prop) + "=el.value;";
    eval(execstring);
    // eval("target.style.webkit"+ wk +"=el.value)");
    //target.setAttribute("-webkit-"+prop,el.value);
}

function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function sizeBox(box, value) {
    var boxes = document.getElementsByClassName(box);
    //alert(boxes.length + ' ' + value);
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].style.minWidth = value + "px";
        boxes[i].style.minHeight = value + "px";
    }
}