.flex{ width: 100%; height: 200px; border: 1px solid #ddd; font: 14px Arial; display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; } .flex > div{ width: 30px; flex: 1 1 auto; -webkit-flex: 1 1 auto; transition: width 0.7s ease-out; -webkit-transition: width 0.7s ease-out; } .flex > div:nth-child(1){ background : #007AA2; } .flex > div:nth-child(2){ background : #FFF; } .flex > div:nth-child(3){ background : #7FCADE; } .flex > div:hover{ width: 20%; }
<div class="flex"> <div></div> <div></div> <div></div> </div>