title: How to force tag to be width of viewport?
body: <p>How do I get a tag, in this case the body tag, to only take up the size of the viewport even if it has a fixed width child?</p>
  
  <p>example:
  <a href="http://jsbin.com/ebusov" rel="nofollow">http://jsbin.com/ebusov</a></p>
  
  <p>description: If I load the above link in Safari 5 and resize the browser I see the expected behavior.  A horizontal scroll bar does not appear.  The content that overflows the viewport is hidden.  If I load this in an ipad the overflowing content is visible and causes scroll bars.</p>
  
  <p>desired outcome: Scroll bars should never show up, including on the iPad.</p>
  
  <p>actual result: On the iPad, and possibly other devices, overflowing content is visible and the user can scroll to the left.</p>
  
  <p>How can I hide content that overflows the viewport with fixed width elements?</p>