CSS3 FlexBox Research

HTML

<div class="container">
  <div class="child one"></div>
  <div class="child two"></div>
  <div class="child three"></div>  
</div>


<div data-bind="dxBox: { direction: 'row|column' align:'start|center|end|stretch', crossAlign: 'start|center|end|stretch', width: 100, height: 100 }">
    <div data-bind="dxBoxItem: { ratio: 1, baseSize: 100 }">
    </div>
    <div data-bind="dxBoxItem: { ratio: 1, baseSize: 100 }">
    </div>
</div>

CSS

.container {
    display: -webkit-flex;      
    height: 100px;
    width: 300px;
    background: lightyellow;
}

.child.one {    
    flex-grow: 1;
    min-width: 15px;    
    color: green;
    background: lightgreen;
}

.child.two {      
    color: blue;
    flex-grow: 1;
    flex-basis: 15px;    
    background: lightblue;
}
.child.three{
    flex-grow: 1;
    background: purple;
}