title: Elements not wrapping inside fixed-width div
body: <p>I have this simple html, with styling:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  #buttons { width:300px; max-width:300px; border-width:1px; white-space:normal;  border-style:solid; }
  #buttons span { cursor:default; padding:10px; white-space: nowrap; }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;nav id="buttons"&gt;
      &lt;span&gt;Some Button&lt;/span&gt;&lt;span&gt;Button&lt;/span&gt;&lt;span&gt;A longer button&lt;/span&gt;&lt;span&gt;Another button&lt;/span&gt;&lt;span&gt;Click me first&lt;/span&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/nav&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The main block element (#buttons) should be fixed in width, but the containing span elements are dynamically generated, and have variable lengths. I want these 'span' elements to wrap and stay inside the block, no matter how many they are. So basically the main block element should expand vertically if needed.</p>
  
  <p>Right now, they expand horizontally, overflowing the main container.</p>
  
  <p>For some strange reason, if I put white spaces between the inline 'span' elements, it works. But I can't do that on production (they are attached to the DOM by a javascript library).</p>