Анимация divs внутри контейнера шириной 100%

Question

Я застрял в этой проблеме. У меня 5 столбцов divs, плавающих рядом друг с другом. При зависании на нем div, который зависает, должен расширять свою ширину с помощью анимации. Я рассмотрел эту часть до сих пор, но моя проблема в том, что когда я нахожу этот div, последний div появляется внизу (это означает, что он превышает 100% -ный контейнер ширины). Я не уверен, как решить эту проблему, не мешая превышать 100% -ный контейнер.

Вот то, что я сделал до сих пор:

jsfiddle

$(document).ready(function() { 
 
    var boxWidth = $(".box").width(); 
 
    $(".box").mouseenter(function() { 
 
    $(this).animate({ 
 
     width: "30%" 
 
    }); 
 
    }).mouseleave(function() { 
 
    $(this).animate({ 
 
     width: boxWidth 
 
    }); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box { 
 
    height: 100vh; 
 
    width: 20%; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" style="background:red"></div> 
 
<div class="box" style="background:grey"></div> 
 
<div class="box" style="background:yellow"></div> 
 
<div class="box" style="background:green"></div> 
 
<div class="box" style="background:#000000"></div>

Answer 1

Если вы хотите flex, чем сделать это таким образом:

body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.boxes { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    width: 100%; 
 
} 
 
.box { 
 
    height: 100vh; 
 
    flex: 1 1 auto; 
 
    transition: flex-grow .3s ease-in-out; 
 
} 
 
.box:hover { 
 
    flex-grow: 1.5; 
 
}

<div class="boxes"> 
 
    <div class="box" style="background:red"></div> 
 
    <div class="box" style="background:grey"></div> 
 
    <div class="box" style="background:yellow"></div> 
 
    <div class="box" style="background:green"></div> 
 
    <div class="box" style="background:#000000"></div> 
 
</div>

Хороший путеводитель для flex here.

Тот же код на JSFiddle.

Answer 2

Если вы измените ширину одного div на 30%, остальные divs должны сжать до 17,5% (70%/4) ширины.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.wrap { 
 
background:black; 
 
overflow:hidden; 
 
} 
 

 
.wrap .box { 
 
    height: 100vh; 
 
    width: 20%; 
 
    float: left; 
 
    transition:width .25s ease; 
 
} 
 

 
.wrap:hover .box:hover { 
 
    width: 30%; 
 
} 
 
.wrap:hover .box { 
 
    width: 17.5%; 
 
}

<div class="wrap"> 
 
    <div class="box" style="background:red"></div> 
 
    <div class="box" style="background:grey"></div> 
 
    <div class="box" style="background:yellow"></div> 
 
    <div class="box" style="background:green"></div> 
 
    <div class="box" style="background:#000000"></div> 
 
</div>