title: CSS overflow-x hidden and overflow-y visible
body: <p>I have read this SO Post: <a href="https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causes-scroll-bar">css overflow-x visible and overflow-y hidden causes scroll bar.</a>  </p>
  
  <p>Also I have gone through: <a href="http://www.brunildo.org/test/Overflowxy2.html" rel="noreferrer">http://www.brunildo.org/test/Overflowxy2.html</a>  </p>
  
  <p>I want to achieve something as follows:  </p>
  
  <p><img src="https://i.stack.imgur.com/iEci5.png" alt="Overflow"></p>
  
  <p>When I tried using following code:</p>
  
  <pre><code>overflow-x: hidden;
  overflow-y: visible;
  </code></pre>
  
  <p>It shows something like following result:<br>
  <img src="https://i.stack.imgur.com/C6mer.png" alt="Overflow 2"><br>
  I dont want the scroll bar to appear.</p>
  
  <p>Does Jquery has any solution for it?</p>