title: Make inline-blocks stretch container horizontally
body: <p>I want to make it so if the inline blocks inside a container exceed the width of the container they make it stretch rather than dropping down below.</p>
  
  <p>I made a codepen of what I mean: <a href="http://codepen.io/anon/pen/pJQWbR" rel="nofollow">http://codepen.io/anon/pen/pJQWbR</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.container{
    overflow: scroll;
  }
  
  .content{
    height: 100px;
    margin: 5px;
    background: blue;
    display: inline-block;
    width: 25%;
  }
  </code></pre>
  
  <p>Trying to make the blue boxes all be on one line.</p>