Live
x
<div class="container1"> <div class="box a">AAAA</div> <div class="box b">BBBBBBBB</div> <div class="box c">CCCCCCCCCCCCCCCCCC</div> </div> <div class="container2"> <div class="box aa">AAAA</div> <div class="box bb">BBBBBBBB</div> <div class="box cc">CCCCCCCCCCCCCCCCCCCCCCCCCC</div> </div> <div class="container3"> <div class="box aaa">AAAA</div> <div class="box bbb">BBBBBBBB</div> <div class="box ccc">CCCCCCCCCCCCCCC</div> </div>
Live
xxxxxxxxxx39
.container1 { display:flex; margin-bottom : 10px;}.container2 { display:flex; margin-bottom : 10px;}.container3 { display:flex;}.a,.b,.c { flex-basis: 200px;}.b{ flex-shrink:2;}.aa,.bb,.cc { width: 200px;}.a, .aa, .aaa{ background-color: lightblue;}.b , .bb ,.bbb{ background-color: lightsalmon;}.c, .cc ,.ccc{ background-color: gold;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.