title: css, how to stop an element being squashed by container
body: <p><a href="http://jsfiddle.net/xvXsQ/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>I want to stop the <code>.outer</code> from changing shape/size when the window is resized to be narrower than <code>.outer</code>s contents by only applying style directly to <code>.outer</code> if that is possible.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='outer'&gt;
      &lt;div class='inner' style='background:#f00'&gt;
      &lt;/div&gt;
      &lt;div class='inner' style='background:#0f0'&gt;
      &lt;/div&gt;
      &lt;div class='inner' style='background:#00f'&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.outer, .inner{
      display: inline-block;
      position: relative;
      float: left;
      margin: 0;
      border: 0;
      padding: 0;
      overflow: visible;
  }
  
  .outer{
      /*what to put in here*/
  }
  
  .inner{
      width:50px;
      height:50px;
  }
  </code></pre>
  
  <p>in the jsfiddle if you resize the result panel to be thinner, you will see the blue get pushed on to the next row, followed by the green square, I would like the outer to maintain its original shape/size so the three <code>.inner</code>s maintain their positions.</p>