title: Can I use overflow:hidden without an explicit height somehow?
body: <p>I have an image with <code>float:left</code>, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any <code>overflow</code> rules:</p>
  
  <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src="https://i.stack.imgur.com/qHecd.png" alt="enter image description here"></p>
  
  <p>Here’s what I want:</p>
  
  <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src="https://i.stack.imgur.com/j95oX.png" alt="enter image description here"></p>
  
  <p>Here’s a fiddle: <a href="http://jsfiddle.net/ZA5Lm/" rel="nofollow noreferrer">http://jsfiddle.net/ZA5Lm/</a></p>
  
  <p><a href="https://stackoverflow.com/questions/9943503/">For some reason</a>, it was decided that <code>overflow:hidden</code> without an explicit height results in the element growing.</p>
  
  <p>Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.</p>