title: Inline-block element gets full width after childs break into new line
body: <p>I recognized, that an inline-block element, gets 100% width if there are more child elements than would fit into one line:</p>
  
  <pre><code>&lt;div style="background-color:red;padding:5px"&gt;
      &lt;div style="display:inline-block;background-color:green;padding:5px"&gt;
          &lt;div class="cube"&gt;&lt;/div&gt;
          &lt;div class="cube"&gt;&lt;/div&gt;
          &lt;div class="cube"&gt;&lt;/div&gt;
          &lt;div class="cube"&gt;&lt;/div&gt;
          &lt;div class="cube"&gt;&lt;/div&gt;
          &lt;div class="cube"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt;
  .cube{ 
      background-color:yellow;
      width:100px;
      height:100px;
      display:inline-block;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/xhj075fr/5/" rel="nofollow noreferrer">https://jsfiddle.net/xhj075fr/5/</a></p>
  
  <p><a href="https://i.stack.imgur.com/3jAuP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3jAuP.png" alt="enter image description here"></a></p>
  
  <p>What i would like to have is a beavior like this:
  <a href="https://i.stack.imgur.com/y9ZU9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y9ZU9.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to get this done with inline block? The goal is, to get a left aligned grid inside of a centered div like this (the width of the green div shoud be based of the number of cubes that fit into one line):</p>
  
  <p><a href="https://i.stack.imgur.com/0Mzg8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Mzg8.png" alt="enter image description here"></a></p>