SOURCE

<div class="main-box">
    <div class="item-box"></div>
    <div class="item-box"></div>
    <div class="item-box"></div>
    <div class="item-box"></div>
    <div class="item-box"></div>
</div>

.main-box{
    width: 600px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
}
.item-box {
    flex: 1;
    animation: flex .3s ease-out;
    cursor: pointer;
}
.item-box:nth-child(1){
    background: red;
}
.item-box:nth-child(2){
    background: #bb55ff;
}
.item-box:nth-child(3){
    background: green;
}
.item-box:nth-child(4){
    background: blue;
}
.item-box:nth-child(5){
    background: blanchedalmond;
}
.item-box:hover {
    flex: 4;
}