<!DOCTYPE html> <html> <head> <title>box</title> <style type="text/css"> .box { /* basic styling */ width: 300px; height: 95px; border: 1px solid #555; font: 14px Arial; /* flexbox setup */ display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; display: box; box-orient: horizontal; } .box > div { -moz-box-flex: 1; -moz-transition: width 0.7s ease-out; -o-transition: width 0.7s ease-out; -webkit-transition: width 0.7s ease-out; transition: width 0.7s ease-out; } /* our colors */ .box > div:nth-child(1){ background : #FCC;-webkit-box-flex:2;} .box > div:nth-child(2){ background : #CFC;-webkit-box-flex:1;} .box > div:nth-child(3){ background : #CCF;-webkit-box-flex:1;} .box > div:hover { width:60%; } </style> </head> <body> <div class="box"> <div>deuxssssss</div> <div>deux</div> <div>deux</div> </div> </body> </html>