title: Make inline-block shrink to contents on overflow
body: <p>I have an inline-block container, with several other inline-block elements like so:
  <img src="https://i.stack.imgur.com/wkWsD.png" alt="As working"></p>
  
  <p>The container is the blue background, the red the elements. Everything is working fine until there's too many elements and the inline-block has to expand:
  <img src="https://i.stack.imgur.com/uuxIG.png" alt="As not working"></p>
  
  <p>The inline-block container expands to the entire width of the body, but I want it to shrink to the width of it's contents. Is this possible with pure CSS? Kinda like this:
  <img src="https://i.stack.imgur.com/NwIKD.png" alt="As I want it to work"></p>
  
  <p><a href="http://jsfiddle.net/eRHnp/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>        #container {
              background: blue;
              display: inline-block;
          }
  
          .box {
              background: red;
              display: inline-block;
              width: 100px;
              height: 100px;
          }
  </code></pre>
  
  <p>Oh, and the container can't be a fixed width :(</p>