title: Element breaks flow in multi-column layout
body: <p>I've ran into an issue that seems to be specific to Chrome on a device with retina display. Specifically, I'm using:</p>
  
  <ul>
  <li>MacBook Pro (Retina, 13-inch, Late 2012)</li>
  <li>OS X (10.10.2)</li>
  <li>Chrome (40.0.2214.111) (64-bit)</li>
  </ul>
  
  <hr>
  
  <p>I've created a CSS multi-column layout on a <code>&lt;ul&gt;</code> element, where one of the <code>&lt;li&gt;</code>'s contains a <code>&lt;div&gt;</code>, which has <code>max-height: 50px</code> and <code>overflow: auto</code>.</p>
  
  <p>Instead of acting as you'd expect, the <code>&lt;div&gt;</code> seemingly ignores the columns and places itself where it would be if there were no columns at all, e.g., <a href="http://i.imgur.com/0OgsEug.png" rel="nofollow">http://i.imgur.com/0OgsEug.png</a>.</p>
  
  <p>Example: <a href="http://jsfiddle.net/pabwszej/2/" rel="nofollow">http://jsfiddle.net/pabwszej/2/</a> (resize the result window so you get a 3-column layout)</p>