title: Firefox: div does not resize width to fit a scaled-down child image
body: <p>I'm trying to build a horizontal scrolling image gallery, which has a fixed height (e.g. 200px) and a bunch of images (aspect ratio mantained, shrunk to fit 200px height) placed side-by-side in the gallery. If the images exceed the browser width, a horizontal scrollbar for the gallery is provided.</p>
  
  <p>I'm having a problem with getting it to work on Firefox. In Firefox, the div that contains the image will act as if its child image wasn't shrunk, and thus leave lots of white space between images. The gallery works as expected in Chrome and Safari.</p>
  
  <p>I've <a href="http://jsfiddle.net/8c2vK/9/" rel="nofollow">made a jsfiddle</a> to try and replicate the problem in as little lines as possible - observe it in Firefox vs. another browser.</p>
  
  <pre><code>.container {
      height: 200px; /* Want a fixed height for container. */
      white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
      overflow: auto; /* Want scrollbars on .container. */
  }
  
  .container &gt; .element {
      display: inline-block;
      height: 100%;
  }
  
  .element &gt; img {
      height: 100%;
  }
  </code></pre>
  
  <p>Am I doing something wrong? Is there any way to get .element to shrink to fit its scaled-down image content?</p>
  
  <p><em>Note that aside from the image, I'd like a text overlay over the image (not reflected in jsfiddle), which is why I've chosen to enclose the image in a .element div (so that I can give it position: relative and then add an absolutely positioned child overlay to it), and chosen to give it a display of inline-block (so that I can align the child overlay to the bottom of .element).</em></p>