title: CSS overflow hiding elements that won't fit 100%
body: <p>I have a div element, that I essentially want to turn into a window (of sorts).  Basically, within that div element is content that extends beyond the view port of the "window" (div element).  Here's a picture of what I'm trying to accomplish:</p>
  
  <p><img src="https://i.stack.imgur.com/PWvjd.png" alt="image of what i want to accomplish"></p>
  
  <p>Now, I tried creating a div element of a fixed size, and gave it <code>overflow: hidden</code>, then placed the larger bit of content within that.  The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits <strong>100%</strong> within the overflow area, it disappears.  </p>
  
  <p>To know what I mean, I've attached another picture:</p>
  
  <p><img src="https://i.stack.imgur.com/aLgmD.png" alt="problem that&#39;s occuring"></p>
  
  <p>Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).</p>
  
  <p>Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?</p>
  
  <p><strong>Edit</strong> The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish:  <a href="http://jsfiddle.net/MRnL6/1/" rel="nofollow noreferrer">http://jsfiddle.net/MRnL6/1/</a></p>
  
  <p>Thanks!</p>