Inline-block element gets full width after children jump to a new line

Question

I found out that an inline block element gets 100% wide if there are more children than fit into 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/

What I would like to have is this behavior:

Is there a way to do this with the built-in block? The goal is to get a left-aligned grid inside a centered div in a similar way (the width of the green div shoud will be based on the number of cubes that fit on one line):

Answer 1

Try the following:

<div style="background-color:red;width:500px;padding:5px">
<div style="margin:auto;width:82.6%;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>

Return if the problem is not resolved.!