<h2> flex-shrink </h2> <div class="wrapper default"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div>
body { padding: 20px; font-family: Helvetica; } .wrapper { display: flex; background-color:#eee; margin-bottom:10px; border:1px solid #CCC; .a { flex-shrink: 3; } } .box { background-color: #20262e; color: #fff; border-radius: 3px; padding: 20px; margin:10px; font-size: 14px; width:50px; }