Flex Box 4

by Zhoon Chen

HTML

<div class="container">
    <div class="B B1">B1</div>
    <div class="B B2">B2 Item</div>
    <div class="B B3">B3</div>
</div>

CSS

.container {
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 150px;
    background-color: #eee;
}
.B {
    height: 100px;
}
.B1{
    background-color:rgba(255,255,0,.5);
    width: 100px;
    -webkit-flex-grow:1;
    -moz-flex-grow:1;
    flex-grow:1;
}
.B2{
    background-color:rgba(255,0,255,.5);
    flex-basis:auto;
}
.B3{
    background-color:rgba(0,255,255,.5);
    width:auto;
}