title: Hide elements, that overflows a fixed width element
body: <p>Consider the following ...</p>
  
  <p><a href="http://roosteronacid.com/viewport.png" rel="nofollow noreferrer">http://roosteronacid.com/viewport.png</a></p>
  
  <p>Here's three elements, with only one element shown (left-most). Is this possible? I've tried something along the lines of this ...</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;I overflow the container, so I should be hidden&lt;/div&gt;
      &lt;div&gt;I also overflow the container, so I should be hidden&lt;/div&gt;
  &lt;/div&gt;
  
  #container {
      overflow: hidden;
      width: 300px;
  }
  
  #container div {
      float: left;
      width: 300px;
  }
  </code></pre>
  
  <p>... But I can't get it to work without specifying a fixed height. Which is something I don't want to. The height of an element has to be dynamic and grow according its content.</p>
  
  <p><em>Note: this has to be a iOS Safari compatible.</em></p>