Not perfect, but here is my solution:
this is the html:
<div class="base">
<div class="container"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child2"></div><div class="child"></div>
Since you are using inline-block, and I want your divs to colapse nicely, I need to have no spaces between them.
And the CSS is:
.container, .base {
width: 500px;
height: 400px;
}
.base {
border: solid 1px black;
}
.container {
-webkit-transition: 1s all linear;
}
.child, .child2 {
width: 120px;
height: 80px;
display: inline-block;
margin: 10px;
}
.child {
-webkit-transition-duration: 1s;
-webkit-transition-property: height, width, margin;
-webkit-transition-timing-function: linear;
background-color: lightblue;
}
.child2 {
-webkit-transition: 1s all linear;
background-color: lightgreen;
}
.base:hover .container {
width: 20px;
}
.base:hover .child {
width: 5px;
height: 0px;
margin: 0px;
background-color: silver;
}
.base:hover .child2 {
margin-right: -120px;
}
The idea is to have an extra div between your container and the children, that is resized at about the same pace that the children. This way, we keep the same layout for all the transition, in this case 3 divs per row, and we avoid all the elements going to the same row and colapsing the top of the visible div.
There is a problem in this approach when the container is smaller than the div that is not shrinking; to avoid it we set the margin-right of the visible element to a negative value that will allow it to fit well inside the container.
I have a problem in the final state, where there is a space between the rows (and the elemennt doesn't get to the topmost position). This problem doesn't show when I have the same code outside the fiddle; I don't know what is causing that.