title: Prevent Horizontal Scrollbar from Appearing in Overflowing Div
body: <p>I am trying to prevent the scroll bar from appearing when the div <code>.boxB</code> overflows and I am unsure why my code is not working. In other words,  I am trying to remove the horizontal scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then <code>.boxA</code>.</p>
  
  <p><a href="http://imgur.com/yQDFG" rel="nofollow">http://imgur.com/yQDFG</a></p>
  
  <p>The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used <code>overflow-x:hidden</code> but that did not do the trick.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="boxA"&gt;boxA  
    &lt;div class="boxB"&gt;boxB&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.boxA {
      background: yellow;
      width: 800px;
      height: 600px;
  }
  
  .boxB {
      background: aqua;
      width: 1000px;
      height: 400px;
          overflow-x: hidden;
  }
  </code></pre>