Flex Box 6

HTML

<div class="container">
    <div class="B B1">width:400</div>
    <div class="B B2">width:150</div>
    <div class="B B3">width:150</div>
    
</div>
<div class="container">
    <div class="c c3">0</div>
    <div class="c c1">50</div>
    <div class="c c2">100</div>
    <div class="c c3">150</div>
    <div class="c c1">200</div>
    <div class="c c2">250</div>
    <div class="c c3">300</div>
    <div class="c c1">350</div>
    <div class="c c2">400</div>
    <div class="c c3">450</div>
    <div class="c c1">500</div>
    <div class="c c2">550</div>
    
</div>

CSS

.container {
    display: -webkit-flex;
    display: flex;
    width: 600px;
    height: 100px;
    background-color: #eee;
}
.B {
    height: 100px;
}
.B1{
    background-color:rgba(255,255,0,.5);
    flex:1 1 400px;
}
.B2{
    background-color:rgba(255,0,255,.5);
    width: 50px;
    flex:1 1 auto;
}
.B3{
    background-color:rgba(0,255,255,.5);
    width: 50px;
    flex:1 1 auto;
}
.c {
    width: 50px;
}
.c1{
    background-color:rgba(255,255,0,.5);
}.c2{
    background-color:rgba(255,0,255,.5);
}.c3{
    background-color:rgba(0,255,255,.5);
}