title: Weird behavior of the overflow-x property
body: <p>Can anyone explain me what is going on here. I specify that overflow-x should be visible and I get horizontal scrollbar. Why is this happening? Am I missing something or should I get some sleep?</p>
  
  <p><a href="http://jsfiddle.net/cssGuy/6j5057my/" rel="nofollow" title="JSFIDDLE">JSFIDDLE</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;p id="one"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis est esse provident assumenda consequatur vel atque minima id veritatis! Totam iure omnis laudantium provident dolorum blanditiis modi voluptatibus nihil.&lt;/p&gt;
  &lt;p id="two"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore debitis blanditiis iure aperiam quam vero esse perferendis doloremque eos natus nemo quos mollitia ratione qui laboriosam itaque animi tempora.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* DIFFERENCE BETWEEN WIDTH:AUTO &amp; WIDTH:100% */
  * {margin: 0;padding: 0;}
  #container {
      overflow-y: hidden;
      overflow-x: visible;
      width: 500px;
      margin: auto;
      background-color: whitesmoke;
  }
  #one {
      width: auto;
      padding:10px;
      margin: 20px;
      border:10px solid gray;
  }
  #two {
      width: 100%;
      padding:10px;
      margin: 20px;
      border:10px solid gray;
  }
  </code></pre>