Upon my realization, an inline-block element will expand to 100% width if there are more child elements than can fit on one line:
<div style="background-color:red;padding:5px">
<div style="display:inline-block;background-color:green;padding:5px">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
</div>
<style>
.cube{
background-color:yellow;
width:100px;
height:100px;
display:inline-block;
}
</style>
https://jsfiddle.net/xhj075fr/5/
https://i.sstatic.net/3jAuP.png
Desiring a behavior similar to this: https://i.sstatic.net/y9ZU9.png
Is it possible to achieve this using inline block? The objective is to obtain a left-aligned grid within a centered div like so (where the width of the green div depends on the number of cubes that can fit in one line):