CSS: Container element taking unncessary space when inline-block children wrap - html

Question

How can I make a container element use only the "required" space to wrap inline-block children? See this image below...
You can see how the arrows stretch through the unwanted space. I've spent a few hours already trying to make it work. I even tried a couple nice SO answers such as this one...
Fit div width to inline-block children
but it didn't seem to suit my case scenario because it assumes a fixed number of children per row.
The fiddler below illustrates the problem I'm facing. However, there's one thing to notice, the max-width of the .box is supposed to be set in % rather than px
html,
body {
background-color: #eee;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.container {
display: block;
width: 100%;
}
.box {
display: inline-block;
/*
In the production "max-width" will be set to a percentage value rather than px units
Using pixels here just for illustration purposes
*/
max-width: 380px;
padding: 20px;
margin: 20px;
background-color: #fff;
border: 1px solid #ddd;
}
.img-wrapper {
}
.img-wrapper span {
display: inline-block;
position: relative;
overflow: hidden;
width: 128px;
height: 128px;
border-radius: 10px;
}
.img-wrapper img {
max-width: 196px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<div class="box">
<p>
Lorem ipsum dolor sit amet
</p>
<div class="img-wrapper">
<span>
<img src="https://i.imgur.com/yvMCRsv.jpg" />
</span>
<span>
<img src="https://i.imgur.com/efFdd14.jpg" />
</span>
<span>
<img src="https://i.imgur.com/7Yv987J.jpg" />
</span>
</div>
</div>
</div>
Question
Basically, all I want to achieve is having the parent/container element use only the necessary space when the children are inline-block (floats are welcomed)

Answer 1

Here's a Fiddle, with working solution
What I basically did there was that,
Added float: left; and margin: 0px 5px 5px 0px; in .img-wrapper span{}
Added :nth-of-type() selector for .img-wrapper span{}
code:
.img-wrapper span {
display: inline-block;
position: relative;
overflow: hidden;
width: 128px;
height: 128px;
border-radius: 10px;
float: left;
margin: 0px 5px 5px 0px;
}
.img-wrapper span:nth-of-type(2n + 1){
clear: left;
}